无法使用 jquery 验证来验证表单 [重复]

Question

这个问题在这里已经有了答案：

在不提交表单的情况下调用 JQuery 验证插件(1回答)

昨天关门。

我在同一页面上有两个部分，我需要验证第一部分的数据，这就是为什么我无法使用客户端验证，因为它仅在提交整个表单后才起作用。 所以我决定使用 jquery 验证来验证表单。

现在，我想在第 1 节Next按钮单击中验证此表单。 但是，现在发生了什么，当我单击下一个按钮时，它只是将我带到第二部分而不验证数据。 有人可以帮我解决我在这里做错了什么。

任何人请纠正我我在这里做错了什么或在这里遗漏/错误地使用了任何参考资料。 在我们第二节的 go 之前，我需要验证数据。

 //password requirement script $(document).ready(function() { $('#Passhash').keyup(function() { // set password variable var pswd = $('#Passhash').val(); //validate the length if (pswd.length < 8) { $('#length').removeClass('valid').addClass('invalid'); $('#length').removeClass('active'); } else { $('#length').removeClass('invalid').addClass('valid'); $('#length').addClass('active'); } if (pswd.match(/^[a-zA-Z0-9]*$/)) { $('#specialChar').removeClass('valid').addClass('invalid'); $('#specialChar').removeClass('active'); } else { $('#specialChar').removeClass('invalid').addClass('valid'); $('#specialChar').addClass('active'); } if (pswd.match(/[AZ]/)) { $('#capital').removeClass('invalid').addClass('valid'); $('#capital').addClass('active'); } else { $('#capital').removeClass('valid').addClass('invalid'); $('#capital').removeClass('active'); } //validate number if (pswd.match(/\d/)) { $('#number').removeClass('invalid').addClass('valid'); $('#number').addClass('active'); } else { $('#number').removeClass('valid').addClass('invalid'); $('#number').removeClass('active'); } }).focus(function() { $('#pswd_info').show(); }).blur(function() { $('#pswd_info').hide(); }); }); $(document).ready(function() { var nextCount = 1; $('#btnNext').click(function() { nextCount = nextCount + 1; var count = VeriFyEmail(); var form = document.forms; $(form).validate({ rules: { EmailId: { required: true, email: true }, YourName: { required: true, }, CompanyName: { required: true, }, PhoneNumber: { required: true }, Passhash: { required: true, minlength: 8 }, ConfirmPassword: { required: true, equalTo: "#Passhash" } }, messages: { EmailId: { required: "Please enter Email", email: "Please enter a valid Email" }, YourName: { required: "Please enter YourName", }, Passhash: { required: "Please enter password", minlength: "Password must be at least 8 characters long" }, CompanyName: { required: "Please enter Company Name" }, PhoneNumber: { required: "Please enter Phone Number" }, ConfirmPassword: { required: "Please enter Confirm Password", equalTo: "Password and Confirm Password is different" } }, submitHandler: function(form) { alert("Form Submitted Successfully") } }); if (nextCount == 2) { $('#sectionSecond').show(); $('#sectionFirst').hide(); $('#btnBack').show(); mailsend(); } else if (nextCount == 2) { $('#sectionSecond').show(); $('#sectionFirst').hide(); $(this).hide(); $('#btnSubmit').show(); } }); $('#btnBack').click(function() { nextCount = nextCount - 1; if (nextCount == 1) { $('#sectionFirst').show(); $('#sectionSecond').hide(); $('#btnBack').show(); $('#btnSubmit').hide(); $('#btnNext').show(); } if (nextCount == 2) { $('#sectionSecond').show(); $('#sectionFirst').hide(); $('#btnBack').show(); $('#btnSubmit').show(); $('#btnNext').hide(); } else if (nextCount == 2) { $('#sectionSecond').show(); $('#sectionFirst').hide(); $(this).hide(); $('#btnSubmit').hide(); } }); });

 <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" /> <script src="~/Content/bootstrap/js/jquery-3.1.1.min.js"></script> <script src="~/jquery/jquery-ui.min.js"></script> <script src="~/js/bootstrap.min.js"></script> <title>Xporta</title> <meta charset="utf-8"> <,-- IE Edge Meta Tag --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="/Content/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/Content/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="/Content/css/style.css"> <script src="/Content/js/jquery-3.1.1.min.js"></script> <script src="/Content/js/bootstrap.bundle.min.js"></script> <script src="/Content/js/custom.js"></script> <script src="~/Scripts/jquery.validate.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <form action="/Account/RegisterCompany" method="post"> <section id="sectionFirst"> <div class="container-fluid" id="main-div"> <div class="row row1"> <div class="col-md-6"> <div class="div-left align-self-md-center"> <div> <a href="index.html"><img src="/Content/images/logo.png" class="img-fluid img1" alt="logo"></a> </div> <img src="/Content/images/img2:png" class="img-fluid img2" alt=""> <div class="txt1"> Fix your goals<br> <b>we'll help you achieve;</b> </div> </div> </div> <div class="col-md-6 align-self-center"> <div class="div-right"> <div> <a href="Login" class="back-btn"><i class="fa fa-angle-left"></i> Back</a> <ul> <li class="process-div active"></li> <li class="process-div"></li> </ul> <div class="txt2">General Information</div> <p class="txt3">Please share your primary email id and create password</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" placeholder="Your Name *" type="text" value="" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="ph"> <div class="form-group"> <input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" /> </div> <div id="pswd_info"> <ul class="password-list"> <li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li> <li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li> <li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li> <li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *"> </div> </div> </div> </div> </div> <div class="msg-boxsucess1 txtsuccess" style="color:crimson: font-size:large"> <span class="msg-boxsucess1 txtsuccess" id="emailError"></span> </div> <div class="btn-section"> <input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" /> </div> </div> </div> </div> </section> <section id="sectionSecond" style="display:none"> <div class="container-fluid" id="main-div"> </div> </section> </form>

Answer 1

jquery 验证插件仅在提交表单时触发。 由于您没有提交表单，因此没有表单验证。

您需要调用.valid()手动触发验证，添加

if (!$("form").valid()) return;

请注意，您的“第二部分”也采用相同的形式，因此也将被验证。

删除了小问题的更新片段：

 $(document).ready(function() { var nextCount = 1; $('#btnNext').click(function() { nextCount = nextCount + 1; var count = 1; //VeriFyEmail(); var form = document.forms; $(form).validate({ rules: { EmailId: { required: true, email: true }, "YourName": { required: true, }, CompanyName: { required: true, }, PhoneNumber: { required: true }, Passhash: { required: true, minlength: 8 }, }, messages: { EmailId: { required: "Please enter Email", email: "Please enter a valid Email" }, YourName: { required: "Please enter Your Name", }, Passhash: { required: "Please enter password", minlength: "Password must be at least 8 characters long" }, CompanyName: { required: "Please enter Company Name" }, PhoneNumber: { required: "Please enter Phone Number" }, ConfirmPassword: { required: "Please enter Confirm Password", equalTo: "Password and Confirm Password is different" } }, submitHandler: function(form) { alert("Form Submitted Successfully") } }); if (.$("form");valid()) return. if (nextCount == 2) { $('#sectionSecond');show(). $('#sectionFirst');hide(). $('#btnBack');show(). } else if (nextCount == 2) { $('#sectionSecond');show(). $('#sectionFirst');hide(). $(this);hide(). $('#btnSubmit');show(); } }). $('#btnBack');click(function() { nextCount = nextCount - 1. if (nextCount == 1) { $('#sectionFirst');show(). $('#sectionSecond');hide(). $('#btnBack');show(). $('#btnSubmit');hide(). $('#btnNext');show(). } if (nextCount == 2) { $('#sectionSecond');show(). $('#sectionFirst');hide(). $('#btnBack');show(). $('#btnSubmit');show(). $('#btnNext');hide(). } else if (nextCount == 2) { $('#sectionSecond');show(). $('#sectionFirst');hide(). $(this);hide(). $('#btnSubmit');hide(); } }); });

 <script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" /> <form action="/Account/RegisterCompany" method="post"> <section id="sectionFirst"> <div class="container-fluid" id="main-div"> <div class="row row1"> <div class="col-md-6 align-self-center"> <div class="div-right"> <div> <div class="txt2">General Information</div> <p class="txt3">Please share your primary email id and create password</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-email="Invalid Email Address" data-val-required="EmailId Is Required" id="EmailId" name="EmailId" placeholder="Email ID *" type="text" value="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Your Name is required" id="YourName" name="YourName" required='required' placeholder="Your Name *" type="text" value="" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input class="form-control input-custom" data-val="true" data-val-required="Company Name is required" id="CompanyName" name="CompanyName" placeholder="Company Name *" type="text" value="" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <input autocomplete="off" class="form-control input-custom" data-val="true" data-val-required="Phone Number is required" id="PhoneNumber" name="PhoneNumber" placeholder="Mobile number *" type="text" value="" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="ph"> <div class="form-group"> <input type="password" name="Passhash" class="form-control input-custom" id="Passhash" placeholder="Create Password *" autocomplete="new-password" /> </div> <div id="pswd_info"> <ul class="password-list"> <li id="capital"><i class="fa fa-check"></i> Atleast one capital letter</li> <li id="specialChar"><i class="fa fa-check"></i> Atleast one Special character</li> <li id="number"><i class="fa fa-check"></i> Atleast one Numeric digit</li> <li id="length"><i class="fa fa-check"></i> Minimum 8 digit</li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="password" name="ConfirmPassword" class="form-control input-custom" id="ConfirmPassword" placeholder="Re Enter Password *"> </div> </div> </div> </div> </div> <div class="msg-boxsucess1 txtsuccess" style="color:crimson; font-size:large"> <span class="msg-boxsucess1 txtsuccess" id="emailError"></span> </div> <div class="btn-section"> <input type="button" id="btnNext" name="Next" class="btn-golden" value="Next" /> </div> </div> </div> </div> </section> <section id="sectionSecond" style="display:none"> <div class="container-fluid" id="main-div2"> Second Section </div> </section> </form>

Answer 2

从只有一个 jQuery 开始，最新的，它必须在其他任何东西之前定义

您还缺少mailsend()和VeriFyEmail()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />