如何使用javascript提醒用户在表单验证中正确输入字段 - How to alert user to correct input fields in form validation using javascript?

我有这段代码片段，每当用户输入不正确的字段时，它将在span标记中显示一些错误。当用户不使用required时，我希望提交表单在提交之前验证并显示alert消息，表示'Please check and input correct fields'。如果用户输入一些正确的数据，它将显示一条消息'Form Ok'。有什么合适的方法来执行吗?传递onsubmit="return validateForm();"函数

请帮助。

function validateForm()
{
 //Prompts the to correct all fields. How??
}
//Checks password function
function checkPasswordMatch() {
    var password = $("#createpassword").val();
    var confirmPassword = $("#confirmpassword").val();
    if ((password && confirmPassword) == "") {
        $("#divCheckPasswordMatch").html("");
    } else if (password != confirmPassword) {
        $("#divCheckPasswordMatch").html("Password do not match!");
        $("#divCheckPasswordMatch").css("color", "red");
    } else {
        $("#divCheckPasswordMatch").html("Password match.");
        $("#divCheckPasswordMatch").css("color", "green");
    }
}
//trigger keyup event in function checkPasswordMatch
$(document).ready(function() {
    $("#createpassword, #confirmpassword").keyup(checkPasswordMatch);
});
//Add an Email Regular Expression and pass it to function validate
function validateEmail(email) {
    var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
//Email Validate function
function validate() {
    var email = $("#email").val();
    if (validateEmail(email)) {
        $("#checkEmail").text("");
    } else 
    {
        $("#checkEmail").text("Please enter a valid email address");
        $("#checkEmail").css("color", "red");
    }
}
//Call the function validate in blur event Jquery
$(document).ready(function(){
	$("#email").blur(validate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <form action="SignupProcess.php" method="POST" onsubmit="return validateForm();" id="signupform">
        <fieldset>
          
          <!-- Email Address field -->
          <div class="form-group">
              <input class="form-control" placeholder="Email" name="email" id="email" type="email" required>
              <span id="checkEmail"></span>
          </div>
 
          <!-- Password input button -->
          <div class="form-group">
              <input class="form-control" placeholder="Create Password"  name="createpassword"  oninvalid="setCustomValidity('Please enter a password')" oninput="setCustomValidity('')" id="createpassword" type="password" required>
          </div>
          
           <!-- Confirm password input button -->
          <div class="form-group">
              <input class="form-control" placeholder="Confirm Password" name="confirmpassword" oninvalid="setCustomValidity('Please match your password')" oninput="setCustomValidity('')" id="confirmpassword" type="password" required>
              <span class="registrationFormAlert" id="divCheckPasswordMatch"></span>
          </div>
          
          <!-- Submit input button -->
          <div class="form-group">
              <input type="submit" id="signup" name="signupsubmit" class="btn btn-info form-control" value="Register">
          </div>
          
        </fieldset>
     </form>
  </body>
</html>

尝试删除表单中的onsubmit，并使用以下代码替换它:

$('input[type="submit"]').click(function(e){
  //validate form
  var condition = validateForm(); //return true or false
  if(condition){
    alert('Form OK!');
  }
  //stop submission
  else{
    alert('Please check and input correct fields!');
    e.preventDefault();
    return false;
  }
});

希望能有所帮助=)

我不是一个很好的程序员，但也许这行得通。

您唯一需要做的就是在电子邮件验证时切换if else语句，这样false操作就像在密码检查时一样好。

我希望它有帮助

if(checkPasswordMatch() && validate() == 0 ){
// custom alert here;
}

这样做会有帮助

    function validateForm() {
    var email = document.getElementById("email");
       if (email == null || email == "") {
         alert("email must be filled out");
         return false;
       }
   }

如果你有多个id为email的输入字段那么在表单中添加属性名，你可以这样做

   function validateForm() {
      var email = document.forms["reqForm"]["email"].value;
    if (email == null || email == "") {
       alert("email must be filled out");
     return false;
    }

}