[英]How to alert user to correct input fields in form validation using javascript?
我有此代碼段代碼，每當用戶輸入不正確的字段時，該代碼都會在span標記中顯示一些錯誤。 當用戶將其保留為空時，我希望我的提交表單可以驗證並顯示一條alert消息，提示'Please check and input correct fields'然后再提交，而不是使用required 。 如果用戶輸入正確的數據，它將顯示一條消息'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;
}
});
希望對您有幫助=）
我不是一個好的編碼員，但是也許可以。
您唯一需要做的就是在enail驗證時切換if else語句，因此錯誤的操作是，就像在進行密碼檢查一樣。
希望它有所幫助
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電子郵件，則將atrribute名稱添加到表單中，即可執行此操作
function validateForm() {
var email = document.forms["reqForm"]["email"].value;
if (email == null || email == "") {
alert("email must be filled out");
return false;
}
}
如何添加 JavaScript 警報消息以顯示使用 JavaScript 的 html 表單驗證是正確的
[英]How to add a JavaScript alert message to show that the html form validation is correct using JavaScript
如何使用 javascript 創建一個 function，它將檢查字段值/用戶輸入並在輸入正確時顯示警報？
[英]How to create a function using javascript which will check a field value/user input and show alert if the input is correct?
如何僅使用 JavaScript 為兩個以上的輸入字段准確顯示表單驗證錯誤消息？
[英]How to display form validation error messages accurately for more than two input fields using only JavaScript?
如何使用JavaScript檢查從-到日期的輸入字段是否正確
[英]how to check if from - to input fields for dates is correct using javascript
JavaScript表單驗證不顯示警報或更改輸入背景色
[英]JavaScript Form Validation Not Showing Alert or Changing Input Background Colour
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.