gpt4 book ai didi

javascript - JQuery 验证不显示正确的消息

转载 作者:行者123 更新时间:2023-11-29 20:58:16 24 4
gpt4 key购买 nike

我正在使用 JQuery 验证插件来验证邮件地址。

    rules: {
mail_person: {
required: true,
email: true
}
},
messages: {
mail_person: {
required: "Mail required",
email: "Mail invalid"
}
},

问题是:如果输入为空并单击提交按钮,则错误消息为“需要输入”。当我开始在邮件输入字段中键入内容时,消息应更改为“无效邮件”,但事实并非如此。

反之亦然:如果输入无效并单击提交按钮,则会出现正确的消息“输入无效”,但在删除输入时不会更改为“需要输入”。

这是一个plunker

最佳答案

试试这段代码

        <!DOCTYPE html>
<html>

<head>
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>

$(document).ready(function() {
$("#signupForm1").validate({
rules: {
mail_person: {
required: true,
email: true,

}
},
messages: {
mail_person: {
required: "Mail required",
email: "Mail invalid"

}
},
errorElement: "div",
errorLabelContainer: '.errorTxt',
errorPlacement: function(error, element) {
// Add the red unterline to the error element
/* $(element).parent().addClass("validation-error")
// Add the alert
if (!element.parent().next().hasClass('alert alert-danger')) {
$('<div class="alert alert-danger" role="alert" style="height: 20px;"> <p class="text-center validation-error-message">' + error.text() + '</p></div>').insertAfter(element.parent());
}*/
},
success: function(label, element) {
// Remove the error
/* if ($(element).parent().hasClass('validation-error')) {
$(element).parent().removeClass("validation-error");
$(element).parent().next().detach();
}*/
},
});
});

</script>
</head>
<body>
<form id="signupForm1" role="form" method="post">
<div class="container">
<div class="input-group gap-bottom">
<span class="input-group-addon col-lg-5 col-md-6 col-sm-8 col-6" id="basic-addon3">
<small>mail</small>
</span>
<input class="form-control" id="mail_person" name="mail_person" aria-describedby="basic-addon3w" type="text" data-msg="Please enter your first name"/>
</div>
<div class="errorTxt alert alert-danger" style="display:none;height: 20px;"></div>
</div>
<input id="submitBtn" name="submitBtn" value="click" class="btn btn-warning center btn-block" type="submit" />
</form>
</body>

</html>

这是一个plunkr

关于javascript - JQuery 验证不显示正确的消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48094686/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com