文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将控件带到窗体验证失败的字段？

问如何将控件带到窗体验证失败的字段？
EN

Stack Overflow用户

提问于 2018-09-17 15:14:09

回答 2查看 160关注 0票数 0

我正在制作一个注册表；如果一个字段没有通过验证测试，则在进行验证时，例如-如果我没有输入名字，它会给出警报，但同时它也会对所有那些空的字段发出警报。我只想将控件发送到该字段，该字段未通过test.In First Name的验证。下面是我的代码：

<!DOCTYPE HTML>
<html>

<head>
  <title>Assignment-2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>

<body style="background-color:powderblue;">
  <h3>
    <marquee style="color : Green;">Please Fill all the details correctly</marquee>
  </h3><br>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-md-2"></div>
      <div class="col-sm-8 col-md-8">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <h3 class="align-middle">Registration Form</h3>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="row">
              <div class="col-sm-12 col-md-6">
                <label for="fName">First Name:</label>
                <input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="lName">Last Name:</label>
                <input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="confirm_email">Confirm Email:</label>
                <input type="email" class="form-control" id="confirm_email" placeholder="type again">
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <label for="email">Password:</label>
                <input type="Password" class="form-control" id="password" placeholder="">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="confirm_email">Confirm Password:</label>
                <input type="Password" class="form-control" id="confirm_password" placeholder="">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6">
                <div class="ml-sm-3 ml-md-3"></div>
                <label for="Gender">Gender:</label>
                <div class="row">
                  <div class="ml-sm-3 ml-md-3"></div>
                  <div class="form-check-inline">
                    <label class="form-check-label" for="Male">
        								<input type="radio" class="form-check-input" id="Gender" 										name="optradio" value="Male" checked>Male
      									</label>
                  </div>
                  <div class="ml-sm-4 ml-md-3"></div>
                  <div class="form-check-inline">
                    <label class="form-check-label" for="Female">
        								<input type="radio" class="form-check-input" id="Gender" 										name="optradio" value="Female">Female
      									</label>
                  </div>
                </div>
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="D.O.R">Date of Registration:</label><br>
                <input type="date" class="form-control" id="date" placeholder="23/07/2018">
                <p id="date"></p>
                <script>
                  function myFunction() {
                    var x = document.getElementById("Date").value;
                    document.getElementById("Date").innerHTML = x;
                  }
                </script>
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <div class="form-check">
                  <label class="form-check-label">
    							<input type="checkbox" class="form-check-input" id="checkbox" value="check">
								I Accept all Terms and Conditions
  							</label>
                </div>
                <div class="row text-center">
                  <div class="col-sm-12 col-md-12">
                    <button id="but" onclick="return btnvalidate();">Submit</button>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-sm-2 col-md-2"></div>
          </div>
        </div>

        <script>
          function btnvalidate() {
            var fname = document.getElementById("firstname").value
            if (fname.length == 0) {
              alert('First Name cannot be Empty');
            }
            var lname = document.getElementById("lastname").value
            if (lname.length == 0) {
              alert('Last Name cannot be Empty');
            }
            var email = document.getElementById("email").value
            if (email.length == 0) {
              alert('email cannot be empty!')
            }
            var confirm_email = document.getElementById("confirm_email").value
            if (confirm_email.length == 0) {
              alert('You NEED to confirm the email!')
            }
            if (email != confirm_email) {
              alert('Email Not Matching! Try again');
            }
            var password = document.getElementById("password").value
            if (password.length == 0) {
              alert('password cannot be empty!')
            }
            var confirm_password = document.getElementById("confirm_password").value
            if (password != confirm_password) {
              alert('Password Not Matching! Try again');
            }
            var date = document.getElementById("date").value
            if (date.length == 0) {
              alert('Date of Registeration cannot be empty!');
            }
            alert($("input[name='optradio']:checked").val());
            if (!document.getElementById('checkbox').checked) {
              alert('Checkbox not checked');
              return false;
            }
          }
        </script>
</body>

</html>

javascript

jquery

html

bootstrap-4

回答 2

Stack Overflow用户

发布于 2018-09-17 15:42:06

您只需要将return放在每个if语句的主体中，如下所示

<!DOCTYPE HTML>
<html>

<head>
  <title>Assignment-2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>

<body style="background-color:powderblue;">
  <h3>
    <marquee style="color : Green;">Please Fill all the details correctly</marquee>
  </h3><br>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-md-2"></div>
      <div class="col-sm-8 col-md-8">
        <div class="row">
          <div class="col-sm-12 col-md-12">
            <h3 class="align-middle">Registration Form</h3>
          </div>
          <div class="col-sm-12 col-md-12">
            <div class="row">
              <div class="col-sm-12 col-md-6">
                <label for="fName">First Name:</label>
                <input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="lName">Last Name:</label>
                <input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="confirm_email">Confirm Email:</label>
                <input type="email" class="form-control" id="confirm_email" placeholder="type again">
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <label for="email">Password:</label>
                <input type="Password" class="form-control" id="password" placeholder="">
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="confirm_email">Confirm Password:</label>
                <input type="Password" class="form-control" id="confirm_password" placeholder="">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-6">
                <div class="ml-sm-3 ml-md-3"></div>
                <label for="Gender">Gender:</label>
                <div class="row">
                  <div class="ml-sm-3 ml-md-3"></div>
                  <div class="form-check-inline">
                    <label class="form-check-label" for="Male">
        								<input type="radio" class="form-check-input" id="Gender" 										name="optradio" value="Male" checked>Male
      									</label>
                  </div>
                  <div class="ml-sm-4 ml-md-3"></div>
                  <div class="form-check-inline">
                    <label class="form-check-label" for="Female">
        								<input type="radio" class="form-check-input" id="Gender" 										name="optradio" value="Female">Female
      									</label>
                  </div>
                </div>
              </div>
              <div class="col-sm-12 col-md-6">
                <label for="D.O.R">Date of Registration:</label><br>
                <input type="date" class="form-control" id="date" placeholder="23/07/2018">
                <p id="date"></p>
                <script>
                  function myFunction() {
                    var x = document.getElementById("Date").value;
                    document.getElementById("Date").innerHTML = x;
                  }
                </script>
              </div>
            </div>
            <div class='row'>
              <div class="col-sm-12 col-md-6">
                <div class="form-check">
                  <label class="form-check-label">
    							<input type="checkbox" class="form-check-input" id="checkbox" value="check">
								I Accept all Terms and Conditions
  							</label>
                </div>
                <div class="row text-center">
                  <div class="col-sm-12 col-md-12">
                    <button id="but" onclick="return btnvalidate();">Submit</button>
                  </div>

                </div>
              </div>
            </div>
            <div class="col-sm-2 col-md-2"></div>
          </div>
        </div>

        <script>
          function btnvalidate() {
            var fname = document.getElementById("firstname").value
            if (fname.length == 0) {
              alert('First Name cannot be Empty'); return
              return
            }
           
            var lname = document.getElementById("lastname").value
            if (lname.length == 0) {
              alert('Last Name cannot be Empty'); return
            }
            var email = document.getElementById("email").value
            if (email.length == 0) {
              alert('email cannot be empty!'); return
            }
            var confirm_email = document.getElementById("confirm_email").value
            if (confirm_email.length == 0) {
              alert('You NEED to confirm the email!'); return
            }
            if (email != confirm_email) {
              alert('Email Not Matching! Try again'); return
            }
            var password = document.getElementById("password").value
            if (password.length == 0) {
              alert('password cannot be empty!'); return
            }
            var confirm_password = document.getElementById("confirm_password").value
            if (password != confirm_password) {
              alert('Password Not Matching! Try again'); return
            }
            var date = document.getElementById("date").value
            if (date.length == 0) {
              alert('Date of Registeration cannot be empty!');
            }
            alert($("input[name='optradio']:checked").val());
            if (!document.getElementById('checkbox').checked) {
              alert('Checkbox not checked');
              return false;
            }
          }
        </script>
</body>

</html>

票数 0

Stack Overflow用户

发布于 2018-09-17 15:46:31

你甚至不需要Javascript来做这件事-浏览器有内置的验证功能。只需将属性required添加到那些不能为空的字段中。

为了演示这一点，我已经将您的示例简化为最基本的必需品：

body {
  background-color: powderblue;
}

<form>
  <div>
    <label for="fName">First Name:</label>
    <input type="text" id="firstname" placeholder="Eg - Michael" required>
  </div>
  <div>
    <label for="lName">Last Name:</label>
    <input type="text" id="lastname" placeholder="Eg - Clarke" required>
  </div>
  <div>
    <button type="submit" id="but">Submit</button>
  </div>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52362543

复制

相似问题

问如何将控件带到窗体验证失败的字段？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将控件带到窗体验证失败的字段？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将控件带到窗体验证失败的字段？
EN