CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc-3jquery-validate
user876289
user876289

Reputation:

How to validate a text box based on radio button selection in ASP.NET MVC 3 and JQuery?

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.

Upvotes: 2

Views: 2933

Answers (4)

user338195
user338195

Reputation:

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.

Upvotes: 1

Bill
Bill

Reputation: 2372

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

Upvotes: 0

sparrow
sparrow

Reputation: 177

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.

Upvotes: 0

C0D3
C0D3

Reputation: 6559

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.

Upvotes: 0

Related Questions