jquery 验证插件 - 默认值和验证

Question

我有一个电子邮件地址的表单输入，如下所示。在这种特殊情况下，我希望允许用户根据需要更改他们当前的电子邮件地址。当表单加载时，我将他们当前的电子邮件列为默认值。 onblur 如果 value='' 然后我再次将值重置为默认值。

它按预期工作，但有一个例外。如果您清除该值，因此没有电子邮件...所需的验证启动（在这种情况下，消息“需要电子邮件”）按预期进行，并且当您 onblur 替换默认值时，但错误消息仍然存在，直到您再次 onfocus 和 onblur。

html 示例输入

<div class="col-md-6 form-group">
    <label><b>Email</b></label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-envelope fa-fw"></i>
        </span>
        <input class="form-control" type="text" name="email" value="<?php echo $_SESSION['account']['account_email']; ?>" onblur="if(this.value == '') { this.value='<?php echo $_SESSION['account']['account_email']; ?>'}"/>
    </div>
    <span class="help-block"></span>
</div>

验证

$('#account-info-form').validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    rules: {
        email: {
            required: true,
            email: true
        }
    },

    messages: {
        email: {
            required: "Email is required.",
            email: "Enter a valid email address."
        }
    },

    highlight: function (element) { // hightlight error inputs
        $(element)
            .closest('.form-group').addClass('has-error'); // set error class to the control group
    },

    success: function (label) {
        label.closest('.form-group').removeClass('has-error');
        label.remove();
    },

    errorPlacement: function (error, element) {
        error.insertAfter(element.closest('.input-group'));
    }

});

编辑：

为了更清楚地说明这一点。输入被赋予默认值="something"。如果用户要擦除该值并且该输入失去焦点，则默认值将返回到该输入。这工作如上所示，但错误字段仍然显示。我只能假设这是因为它在我的 onblue 替换默认值之前已经过验证。为了支持这一点，您可以重新关注该值，然后再次关注，错误就会消失。

我想完成类似的事情：

if (inputvalue == ''){
   inputvalue = defaultvalue; // if it was supplied in html (either way it would not matter as ifit wasn't it would just stay blank)
   now perform validation so the field is not tagged as an error since the original valid value was replaced to due being blank
}

解决方案：（感谢 Sparky）

使用 jquery 我可以完成默认值总是在空白输入时被替换（用户删除表单加载时的默认值）。他们还可以更改课程的值，并且将应用正常的验证规则，例如电子邮件、必填等。

我稍微修改了解决方案，使其更普遍地用于多个输入。

<input class="form-control" type="text" name="lname" data-default="true" value="this is the default value" />

注意添加了 data-default="true"。然后在 validate() 处理程序之外的 jquery 中...

$('input[data-default="true"]').on('blur', function() {
    if ( $(this).val() == '' ) { // values is blank from being deleted by user
        $(this).val( this.defaultValue ); // set it back to default
        $(this).valid(); // trigger validation after setting default back (remove incorrect errors assuming default value is valid)
    }
});

Answer 1

使用the .valid() method，这将触发字段的立即验证测试。附加到整个表单或字段...

$('#myField').valid();

或者在您的 blur 事件处理程序中（为了便于阅读而换行）...

<input class="form-control" type="text" name="email"
    value="<?php echo $_SESSION['account']['account_email']; ?>"
    onblur="if(this.value == '') {
        this.value='<?php echo $_SESSION['account']['account_email']; ?>';
        this.valid();  // <-- trigger validation test of this field
    }"
/>

---

或者更好的是，使用 jQuery 来消除内联 JavaScript...

$('input[name="email"]').on('blur', function() {
    if ( $(this).val() == '' ) {
        $(this).val( "<?php echo $_SESSION['account']['account_email']; ?>" );
        $(this).valid(); // <-- trigger validation test of this field
    }
});