Как перенести элемент управления в поле, где проверка формы не удалась? - PullRequest
Новая
       4

Как перенести элемент управления в поле, где проверка формы не удалась?

0 голосов
/ 17 сентября 2018

Я делаю регистрационную форму;при выполнении проверки, если поле не проходит тест проверки, например: если я не ввел имя, он выдает предупреждение, но вместе с этим он выдает предупреждения для всех тех полей, которые пусты.Я хочу отправить элемент управления только в то поле, которое не прошло тест проверки. В этом случае Имя.Вот мой код: 

<!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>

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Для этого вам даже не нужен 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 голосов
/ 17 сентября 2018

Вам просто нужно поместить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...