validate only one field with certain button

Question

I have the following rendered form:

        <div class="form-row clearfix">
            <label for="FirstName" class="overlay">First name</label>
            <input id="FirstName" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="FirstName" data-val-required="Enter first name" data-val-length-min="2" data-val-length-max="50" data-val-length="Enter 2 to 50 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="FirstName"></div>
        </div>

        <div class="form-row clearfix">
            <label for="Surname" class="overlay">Surname</label>
            <input id="Surname" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="Surname" data-val-required="Enter surname" data-val-length-min="2" data-val-length-max="50" data-val-length="Enter 2 to 50 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="Surname"></div>
        </div>

        <div class="form-row clearfix">
            <label for="TelNo" class="overlay">Tel no.</label>
            <input id="TelNo" class="input-validation-error textbox" type="text" placeholder="Optional" value="" name="TelNo" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="TelNo"></div>
        </div>

        <div id="postcode-holder" class="form-row clearfix">
            <label for="Postcode" class="overlay">Postcode</label>
            <input id="Postcode" class="input-validation-error textbox" type="text" placeholder="Required" value="" name="Postcode" data-val-required="Enter postcode" data-val-length-min="2" data-val-length-max="10" data-val-length="Enter 2 to 10 characters" data-val="true" />
            <div class="validate-error field-validation-error" data-valmsg-replace="true" data-valmsg-for="Postcode"></div>
            <input id="find-addresses" name="find-addresses" type="submit" class="orange-button" value="Find Address" />
        </div>

        <div class="button-holder">
            <button name="order-brochure" class="large orange-button">Order Brochure<span class="sprite large-white-arrow"></span></button>
        </div>

Which as you can see has two buttons:

find-addresses - this will be used for postcode lookup.
order-brochure - used to submit the form data

I am trying to get the find-addresses button to only validate if there is a postcode entered into the form but when I press the button, it validates all fields.

I have tried adding the class cancel - but then this cancels all validation so I then tried the following:

    $("#find-addresses").on("click", function () {
        //#request-brochure-form is the correct id for the form
        $("#request-brochure-form").validate({
            rules: {
                Postcode: "required",
                Surname: {
                    required: false
                }
            }
        });
    });

but this didn't seem to change anything. How do I cancel the validation for all required fields (apart from the postcode field) on the find addresses button click?

Never put `.validate()` inside of a `click` handler. It's only used for initializing the plugin on your form. — Sparky, Feb 19 '15 at 16:37
@Sparky thanks, that's good to know. I usually don't have to bother with any of this because mvc usually handles it all for me, but as I'm wanting to change the default behaviour, that is what is causing the problem for me — , Feb 19 '15 at 16:41

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Apply/attach rules on the fly when click event occurs.

$('#find-addresses').on('click', function(){
    $('[name="Postcode"]').rules('add', { 
        required: true,
        email: true
    });
    $('#Other_Form_Fields').rules('remove');        
    $('#request-brochure-form').valid();  // trigger the validation & do NOT submit        
});

And also when you use other button , while using Click event , remove rules applied on #find-address click.

Refer This for more details.

Just in your case if you want to Invalidate Surname if you have set using other buttons , use $('[name="Surname"]').rules('remove');

edited May 23 '17 at 12:16

Community

1
1

answered Feb 19 '15 at 16:31

Pratik Joshi

11,485
7
41
73

1

thanks for answering, I'm off home now but I'll have a go with this on monday and see how it goes – Feb 19 '15 at 16:40
1

Thanks, this did the trick - just had to rebind the rules when I clicked my main button – Feb 23 '15 at 10:02

validate only one field with certain button

1 Answers1