如果缺少字段值并且用户开始为下一个字段键入内容，如何显示错误消息？

Question

例如-如果用户开始输入密码但尚未输入电子邮件，但立即显示消息-“首先输入电子邮件ID”。 我正在使用bootstrap4＆jQuery / Javascript。光标应该到达发现错误的字段，并且在满足所有验证条件的情况下，当我单击Submit按钮时如何重定向到另一个页面。 我曾尝试在HTML中使用锚标记来单击按钮时进行重定向，这显然会导致重定向到链接，而不是检查验证。 我尝试使用window.location方法，但未给出任何响应。

 <!DOCTYPE html> <html> <head> <title>Three Forms</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body style="background-color : grey"> <div class="container" style="background-color: green;padding-bottom: 2%;"> <div style="background-color:black;"> <h2><b>Forms</b></h2> </div> <div class="row" style="margin-top:3%;"> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left: 4%;margin-right: 3%;margin-bottom:3%;"> <form class="form-A" id="form-A"> <div style="background: linear-gradient(to top left, #ff9999 0%, #ff9966 35%); height: 100px; text-align : center; color:white;"> <h3><b>Log In</b></h3> <a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i></a> <a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a> <a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a> </div> <div style="padding: 4%;"> <div class="form-sm"> <input type="Email" id="email1" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="form-sm"> <input type="Password" id="password1" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-right mt-4"> <a class="btn btn-link" href="https://www.google.com" style="color:grey;font-size:normal;">Forgot Password?</a> </div> <div class="text-left mt-4" style="font-size:8px;font-weight: normal;"> <button class="btn btn-primary" id="login" style="Background-color:grey; border-radius:25px;" onclick="return form1validations() "> Log In<i class="fa fa-paper-plane-o ml-1"></i></button> &nbsp; <span style="color:grey;">Don't have an account?</span> <a class="btn btn-link" href="Sign Up" style="text-align : Right;color:black; font-size:10px;">Sign up?</a> </div> <div class="pb-4"></div> </div> </form> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left:4%;margin-right:3%;margin-bottom:3%;"> <form id="form-B" style="padding-left:4%;padding-right:3%;margin-left:-4%;margin-right:-3%;"> <h3 style="color:#cc00cc;text-align : center;"><b>Sign Up</b></h3> <div class="md-form form-sm" style="padding: 3%;"> <div class="mb-5"></div> <input type="Email" id="email2" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="md-form form-sm" style="padding: 3%;margin-top:-6%"> <input type="Password" id="password2" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-left mt-4" style="color:grey;font-size:15px;font-weight: normal;"> <input type="checkbox" id="checkbox" style="color:grey;font-size:15px;font-weight: normal;"> Accept the<a href="https://amazon.com">Terms and Conditions</a> </div> <div class="text-left mt-4" style="font-size:9px;font-weight: normal;"> <button class="btn btn-primary" id="signup" style="background-color : DeepPink;border-radius:25px;" onclick="return form2validations()">Sign Up <i class="fa fa-paper-plane-o ml-1"></i></button> <span style="color:grey;">have an account?</span> <a class="btn btn-link" href="Log In" style="text-align : Right; font-size:9px;">Log In?</a> </div> <div class="mb-4"></div> <div style="background: linear-gradient(to top, #666699 100%, #666699 0%); height: 100px; text-align : center; color:white;"><br><br> <a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i> </a><a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a> <a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a> </div> </form> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;margin-left: 4%;margin-right:3%;padding:top:0.5%;margin-bottom:3%; "> <form id="form-C"> <h3 style="text-align : center;"><b>Sign In </b></h3> <div class="md-form form-sm" style="padding-top:1%;"> <div class="mb-5"></div> <input type="Email" id="email3" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="md-form form-sm"> <input type="Password" id="password3" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-right mt-4"> <a class="btn btn-link" href="https://www.gmail.com">Forgot Password?</a> </div> <div class="text-center p-4"> <button class="btn btn-primary" id="signin" style="width : 85%;border-radius:25px;" onclick="return form3validations()">Sign In <i class="fa fa-paper-plane-o ml-1"></i> </button> </div> <div style="color:grey;text-align : center;font-size:15px;">or sign in with:</div> <div class="mb-2"></div> <div style="text-align:center;color:Blue;"> <a href="https://www.facebook.com" class="btn btn-link" style="background-color: lightgrey;width:15%; border-radius:25%;" role="button"> <i class="fa fa-facebook"></i></a> <a href="https://www.twitter.com" class="btn btn-link" style="background-color:lightgrey;width:15%; border-radius:25%;" role="button"> <i class="fa fa-twitter"></i></a> <a href="https://www.plus.google.com" class="btn btn-link" style="background-color: lightgrey;width:15%; border-radius:25%;" role="button"><i class="fa fa-google-plus"></i></a> </div> </form> </div> </div> <div class="mb-3"></div> <script> function form1validations() { var email1 = document.getElementById("email1").value; var password1 = document.getElementById("password1").value; var mail1 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd1 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email1.length == 0) { alert('email cannot be empty!'); return; } else if (!email1.match(mail1)) { return; } else if (password1.length == 0) { alert('password cannot be empty!'); return false; } else if (!password1.match(pswd1)) { alert('password is incorrect!') return false; } else { alert('you are sucessfully Logged in!'); } window.location.href = "/home/user/Shivam/newpage.html"; } function form2validations() { var email2 = document.getElementById("email2").value; var password2 = document.getElementById("password2").value; var mail2 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd2 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email2.length == 0) { alert('email cannot be empty!'); return; } else if (!email2.match(mail2)) { return; } else if (password2.length == 0) { alert('password cannot be empty!'); return false; } else if (!password2.match(pswd2)) { alert('password is incorrect!') return false; } else if (!document.getElementById('checkbox').checked) { alert('Checkbox not checked'); return false; } else { alert('Sign Up successful!'); } window.location.href = "/home/user/Shivam/newpage.html"; } function form3validations() { var email3 = document.getElementById("email3").value; var password3 = document.getElementById("password3").value; var mail3 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd3 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email3.length == 0) { alert('email cannot be empty!'); return; } else if (!email3.match(mail3)) { return; } else if (password3.length == 0) { alert('password cannot be empty!'); return false; } else if (!password3.match(pswd3)) { alert('password is incorrect!') return false; } else { alert('you are sucessfully Signed In!'); } window.location.href = "/home/user/Shivam/newpage.html"; } </script> </body> </html> 

Answer 1

看一下下面的代码片段，当您关注输入字段时，我在其中添加了验证。 可以很好地检查form1。 我必须删除验证功能中的焦点，否则它将陷入循环。 另外，我建议您在重点关注输入和提交表单时创建单独的验证。

 <!DOCTYPE html> <html> <head> <title>Three Forms</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body style="background-color : grey"> <div class="container" style="background-color: green;padding-bottom: 2%;"> <div style="background-color:black;"> <h2><b>Forms</b></h2> </div> <div class="row" style="margin-top:3%;"> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left: 4%;margin-right: 3%;margin-bottom:3%;"> <form class="form-A" id="form-A"> <div style="background: linear-gradient(to top left, #ff9999 0%, #ff9966 35%); height: 100px; text-align : center; color:white;"> <h3><b>Log In</b></h3> <a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i></a> <a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a> <a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a> </div> <div style="padding: 4%;"> <div class="form-sm"> <input type="Email" id="email1" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="form-sm"> <input onfocus="form1validations()" type="Password" id="password1" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-right mt-4"> <a class="btn btn-link" href="https://www.google.com" style="color:grey;font-size:normal;">Forgot Password?</a> </div> <div class="text-left mt-4" style="font-size:8px;font-weight: normal;"> <button class="btn btn-primary" id="login" style="Background-color:grey; border-radius:25px;" onclick="return form1validations() "> Log In<i class="fa fa-paper-plane-o ml-1"></i></button> &nbsp; <span style="color:grey;">Don't have an account?</span> <a class="btn btn-link" href="Sign Up" style="text-align : Right;color:black; font-size:10px;">Sign up?</a> </div> <div class="pb-4"></div> </div> </form> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left:4%;margin-right:3%;margin-bottom:3%;"> <form id="form-B" style="padding-left:4%;padding-right:3%;margin-left:-4%;margin-right:-3%;"> <h3 style="color:#cc00cc;text-align : center;"><b>Sign Up</b></h3> <div class="md-form form-sm" style="padding: 3%;"> <div class="mb-5"></div> <input type="Email" id="email2" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="md-form form-sm" style="padding: 3%;margin-top:-6%"> <input type="Password" id="password2" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-left mt-4" style="color:grey;font-size:15px;font-weight: normal;"> <input type="checkbox" id="checkbox" style="color:grey;font-size:15px;font-weight: normal;"> Accept the<a href="https://amazon.com">Terms and Conditions</a> </div> <div class="text-left mt-4" style="font-size:9px;font-weight: normal;"> <button class="btn btn-primary" id="signup" style="background-color : DeepPink;border-radius:25px;" onclick="return form2validations()">Sign Up <i class="fa fa-paper-plane-o ml-1"></i></button> <span style="color:grey;">have an account?</span> <a class="btn btn-link" href="Log In" style="text-align : Right; font-size:9px;">Log In?</a> </div> <div class="mb-4"></div> <div style="background: linear-gradient(to top, #666699 100%, #666699 0%); height: 100px; text-align : center; color:white;"><br><br> <a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i> </a><a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a> <a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a> </div> </form> </div> <div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;margin-left: 4%;margin-right:3%;padding:top:0.5%;margin-bottom:3%; "> <form id="form-C"> <h3 style="text-align : center;"><b>Sign In </b></h3> <div class="md-form form-sm" style="padding-top:1%;"> <div class="mb-5"></div> <input type="Email" id="email3" class="form-control form-control-sm" placeholder="Your Email"> </div> <div class="mb-2"></div> <div class="md-form form-sm"> <input type="Password" id="password3" class="form-control form-control-sm" placeholder="Your Password"> </div> <div class="text-right mt-4"> <a class="btn btn-link" href="https://www.gmail.com">Forgot Password?</a> </div> <div class="text-center p-4"> <button class="btn btn-primary" id="signin" style="width : 85%;border-radius:25px;" onclick="return form3validations()">Sign In <i class="fa fa-paper-plane-o ml-1"></i> </button> </div> <div style="color:grey;text-align : center;font-size:15px;">or sign in with:</div> <div class="mb-2"></div> <div style="text-align:center;color:Blue;"> <a href="https://www.facebook.com" class="btn btn-link" style="background-color: lightgrey;width:15%; border-radius:25%;" role="button"> <i class="fa fa-facebook"></i></a> <a href="https://www.twitter.com" class="btn btn-link" style="background-color:lightgrey;width:15%; border-radius:25%;" role="button"> <i class="fa fa-twitter"></i></a> <a href="https://www.plus.google.com" class="btn btn-link" style="background-color: lightgrey;width:15%; border-radius:25%;" role="button"><i class="fa fa-google-plus"></i></a> </div> </form> </div> </div> <div class="mb-3"></div> <script> function form1validations() { var email1 = document.getElementById("email1").value; var password1 = document.getElementById("password1").value; var mail1 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd1 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email1.length == 0) { document.getElementById("password1").blur(); document.getElementById("email1").focus(); alert('email cannot be empty!'); return; } else if (!email1.match(mail1)) { return; } } function form2validations() { var email2 = document.getElementById("email2").value; var password2 = document.getElementById("password2").value; var mail2 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd2 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email2.length == 0) { alert('email cannot be empty!'); return; } else if (!email2.match(mail2)) { return; } else if (password2.length == 0) { alert('password cannot be empty!'); return false; } else if (!password2.match(pswd2)) { alert('password is incorrect!') return false; } else if (!document.getElementById('checkbox').checked) { alert('Checkbox not checked'); return false; } else { alert('Sign Up successful!'); } window.location.href = "/home/user/Shivam/newpage.html"; } function form3validations() { var email3 = document.getElementById("email3").value; var password3 = document.getElementById("password3").value; var mail3 = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$/; var pswd3 = /^(?=.*\\d)(?=.*[az])(?=.*[AZ]).{8,}$/; if (email3.length == 0) { alert('email cannot be empty!'); return; } else if (!email3.match(mail3)) { return; } else if (password3.length == 0) { alert('password cannot be empty!'); return false; } else if (!password3.match(pswd3)) { alert('password is incorrect!') return false; } else { alert('you are sucessfully Signed In!'); } window.location.href = "/home/user/Shivam/newpage.html"; } </script> </body> </html> 

Answer 2

我为您做了一个简单的表格，可以完成工作。

我已经使用Element.scrollTo()方法向用户显示哪个字段是必需的。

 let checkFill = el => { let siblings = [...el.parentNode.children]; let bool = true; if(siblings.indexOf(el) !== 0) { for(let s of siblings) { if(s !== el) { if(s.value.length === 0) { alert('Fill out the previous fields first!'); window.scrollTo(0, s.offsetTop); s.focus(); bool = false; break; } } else break; } } return bool; }; let redirect = bool => { if(bool) { window.location.href = 'https://stackoverflow.com/'; console.log(window.location.href); } }; 

 input { display: block; height: 40px; width: 75vw; margin: 20vh auto; font-size: 20pt; } button { height: 80px; width: 400px; margin: 10vh; font-size: 20pt; } 

 <form> <input type='email' onFocus='checkFill(this);' required/> <input type='password' onFocus='checkFill(this);' required/> <input type='number' onFocus='checkFill(this);' required/> <button id='btn' onClick='redirect(checkFill(this));'>Log In</button> </form>