Question

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

它按预期工作，但有一个例外。如果你清除了这个值，那么就没有电子邮件......必要的验证会按预期启动（在这种情况下是“需要电子邮件”的消息。）并且当你在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'));
    }

});

编辑：

使这更清楚。输入被赋予默认值=“某事物”。如果用户要擦除该输入的值并且没有焦点，则将默认值返回到输入。这工作如上所示，但错误字段仍然显示。我只能假设这是因为它在我的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
    }
});

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

1 个答案: