使用特定按钮仅验证一个字段

Question

我有以下渲染形式：

        <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>

你可以看到有两个按钮：

find-addresses - 这将用于邮政编码查找。
order-brochure - 用于提交表单数据

我试图让 find-addresses 按钮仅验证是否在表单中输入了邮政编码，但是当我按下按钮时，它会验证所有字段。

我已经尝试添加类取消 - 但是这会取消所有验证，所以我尝试了以下操作：

    $("#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
                }
            }
        });
    });

但这似乎并没有改变任何东西。如何在点击查找地址按钮时取消对所有必填字段（邮政编码字段除外）的验证？

Answer 1

当点击事件发生时动态应用/附加规则。

$('#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        
}); 

当您使用其他按钮时，在使用 Click 事件时，删除应用于#find-address click 的规则。

更多详情请参考This。

如果你想在你的情况下使Surname无效，如果你已经设置了使用其他按钮，请使用$('[name="Surname"]').rules('remove');