Question

我有这个代码段代码，只要用户输入错误字段，就会在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>

Answer 1

尝试使用以下代码删除表单中的try/catch添加替换它：

try/catch

希望有帮助=）

Answer 2

我不是一个好的程序员，但也许这样做。

你唯一需要的是在enail验证时切换你的if else语句，所以假动作就像密码检查一样好。

我帮忙

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

Answer 3

这样的事情会有所帮助

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

如果您有多个带有id电子邮件的输入字段，请在表单中添加atrribute名称，然后就可以执行此操作

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

}

如何使用javascript提醒用户在表单验证中更正输入字段？

3 个答案: