Question

我在我的注册表单上使用jQuery validate插件进行客户端验证。我想隐藏错误消息“请输入您的名字”，然后在红色框中显示必填字段。

以下是我的代码：

<script>
    $("#register-form").validate({
        errorPlacement: function(error, element) {
            return true;
        }
        rules: {
            firstname: "required",
            lastname: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname"
        }
    }); 
</script>

在这里，我使用了“errorPlacement”选项来隐藏错误消息，但它确实隐藏了消息但没有聚焦我的必填字段，并且还重新加载了表单。

我希望所有必填字段都集中在红色框而不是错误消息

Answer 1

＆＃13;

$("#register-form").validate({
    errorPlacement: function (error, element) {
        return false;
    },
    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname"
    }
});

＆＃13;

.error {
    border: 1px solid red !important;
}
.error:focus {
    border: 1px solid red !important;
}
.valid {
    border: 1px solid green !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form role="form" id="register-form">
    <div class="form-group">
        <label for="firstname">FirstName:</label>
        <input type="text" class="form-control" name="firstname" id="firstname">
    </div>
    <div class="form-group">
        <label for="lastname">LastName:</label>
        <input type="text" class="form-control" name="lastname" id="lastname">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

＆＃13;

Answer 2

1 - 隐藏错误消息errorPlacement回调函数设置为return false;而不是return true;

errorPlacement: function(error, element) {
    return false;
}, //<---missing comma here

errorPlacement:功能导致表单提交且未验证输入

之后缺少2个逗号

3-验证插件具有默认类error和valid，如下所示修改它们以将输入字段突出显示为红色，只需将border: 1px solid red属性添加到error选择器< / p>

.error {
    border: 1px solid red;
}
.error:focus {
    border: 1px solid red;
}
.valid {
    border: 1px solid green;
}

$("#register-form").validate({
    errorPlacement: function (error, element) {
        return false;
    },
    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname"
    }
});

.error {
    border: 1px solid red !important;
}
.error:focus {
    border: 1px solid red !important;
}
.valid {
    border: 1px solid green !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form role="form" id="register-form">
    <div class="form-group">
        <label for="firstname">FirstName:</label>
        <input type="text" class="form-control" name="firstname" id="firstname">
    </div>
    <div class="form-group">
        <label for="lastname">LastName:</label>
        <input type="text" class="form-control" name="lastname" id="lastname">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Fiddle

jQuery validate plugin：隐藏错误消息并显示焦点元素

2 个答案: