javascript - 如果缺少字段值并且用户开始输入下一个字段，如何显示错误消息？

标签 javascript jquery css html bootstrap-4

例如 - 如果用户开始输入密码但尚未输入电子邮件，但会立即显示消息 - “请先输入电子邮件 ID”。 我正在使用 bootstrap4 和 jQuery/Javascript。光标应该到达发现错误的那个字段。此外，当满足所有验证时，如何在单击“提交”按钮时重定向到另一个页面。我尝试在 HTML 中使用 anchor 标记在单击按钮时进行重定向，这显然会导致重定向到链接而不是检查验证。我试过使用 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)(?=.*[a-z])(?=.*[A-Z]).{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)(?=.*[a-z])(?=.*[A-Z]).{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)(?=.*[a-z])(?=.*[A-Z]).{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>

最佳答案

我已经为您制作了一个简单的表格来完成这项工作。

我用过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>

关于javascript - 如果缺少字段值并且用户开始输入下一个字段，如何显示错误消息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52491651/

上一篇：html - 剪辑路径 css 男士图像未显示在 div 上

下一篇：javascript - 图像比较 slider 容器不会 flex 包裹

相关文章：

javascript - 如果超过 20 个，则删除旧的 div |查询

css - 在 json 中实现真棒字体

html - 具有不同 <li> 高度的内联导航中的 100% 高度链接

javascript - 无法检查下拉菜单是否包含一些使用 Selenium 的文本

javascript - 在获取事件监听器中获取服务 worker 范围

javascript - Twitter Bootstrap 轮播 : have carousel-indicators outside Carousel Div

JQuery遍历DOM并提取节点值

javascript - 如何从另一个 JS 文件调用 Javascript 函数

jquery - Thickbox 和 Google map 链接

javascript - 将测试选项与相应的 `radio` 按钮对齐

©2024 IT工具网  联系我们