I have a radio button with values, "Yes" and "No". If user selects "Yes", the text box slides down. So it has to be validated. If user clicks "No", the textbox slides up and there is no need for validation.
I tried to use, ValidationMessageFor(model => model.TextBoxValue), but I am not able to submit the form as, it validates the text box even it is slided up.
The "JQuery.Validate" library might be a reasonable solution. It will allow you to validate your field based on some condition. Syntax is fairly expressive:
$("#SomeFormId form").validate({
rules: {
"YourTextBoxId": {
required: {
depends: function(element) {
return $("#YourCheckBoxId").is(":checked");
}
}
}
// Writing this is notepad, you'll have to look up the syntax if you choose this approach.
Add a hidden field that keeps track of the textbox showing or not. Check the field before validating.
You can even use javascript to see if the textbox.style.display == 'hidden' and run the validate function from that.
Hope this helps.
I'm assuming you're using jquery to slide the textbox up and down. Another method would be to toggle the disabled attribute of the textbox with jQuery when you slide it up or down. Disabled elements don't submit to the server.
edit:
I'd say right after or right before the code for sliding the textbox out, you'd do something like the following
<<when showing the textbox
$("#textbox-id").attr('disabled', false);
<<when hiding the textbox
$("#textbox-id").attr('disabled', true);
This disables the user from using that textbox in any way, including submitting it to the server, so the server won't see any values which might be in it.
edit2: Just remembered you'll also need to check the value of the checkbox when the form is submitted. If it's checked, check the textbox, if it isn't then don't.
textbox's id is. This would go inline with whatever other code is getting executed when the textbox is sliding in or out.As far as I understood, you want to check the state of a Radio Button, accordingly show/hide a textbox. When shown it has to be validated, when hidden, no validation required.
I would suggest enabling validation at the rendering time. Now based on selection, you show/hide textbox, ill put the following code inside $(document).ready()
// select the radio button
var radioBtn = $('#radioBtn1');
var initialState = radioBtn.is(':checked');
// hide/show
var textbox = $('#txtBox1')[initialState ? 'show' : 'hide']();
// Show/hide based on radio button selection
radioBtn.click(function () {
textbox[initialState ? 'show' : 'hide']();
});
}
Hope this helps, Regards
