提交表單前顯示用戶結束錯誤

我有一個表單，我希望在數據庫中添加值。它工作正常，爲驗證我已添加服務器端驗證，但錯誤，如果任何得到顯示窗體已提交後，我希望使用用戶端驗證的方式，如果用戶不輸入字段，不是輸入正確的格式或密碼不匹配時，錯誤應該同時顯示，即在點擊提交按鈕之前。誰能告訴它如何可以做到提交表單前顯示用戶結束錯誤

<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    { 


     if (empty($_POST["email"])) 
      { 
       $emailErr = "Email is required"; 
      } 
     else 
      { 
       $email =$_POST["email"]; 
      } 

     if (empty($_POST["password"])) 
      { 
       $pswrdErr = "password is required"; 
      } 
     else 
      { 
       $password = $_POST["password"]; 
      } 

     if ($_POST["password"]!=$_POST["retype_password"]) 
      { 
       $pswrdErr = "password does not match"; 
      } 
     else 
      { 
       $password = $_POST["password"]; 
      } 

     //insert query to add values in database 

    } 
?>   
<form name="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" > 
    <input type="text" placeholder="Name" name="name"/> 
    <input type="email" placeholder="Email" name="email"/> 
    <input type="password" placeholder="Password" name="password"/> 
    <input type="password" placeholder="Retype Password" name="retype_password"/> 
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button> 
</form>

來源

2016-01-27 stuti

可能的複製（http://stackoverflow.com/questions/16990378/javascript-form-validation-with-password-confirming） – Gavriel

重複的：http://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation -script – Gavriel

你可以使用jquery驗證。 –

你可以試試[JavaScript表單驗證，密碼確認]這個

<!DOCTYPE html> 
<html> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    { 
     if (empty($_POST["email"])) 
      { 
       $emailErr = "Email is required"; 
      } 
     else 
      { 
       $email =$_POST["email"]; 
      } 

     if (empty($_POST["password"])) 
      { 
       $pswrdErr = "password is required"; 
      } 
     else 
      { 
       $password = $_POST["password"]; 
      } 

     if ($_POST["password"]!=$_POST["retype_password"]) 
      { 
       $pswrdErr = "password does not match"; 
      } 
     else 
      { 
       $password = $_POST["password"]; 
      } 

     //insert query to add values in database 

    } 
?>   
<form name="form" id="register-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" > 
    <input type="text" placeholder="Name" name="name"/> 
    <input type="email" placeholder="Email" name="email"/> 
    <input type="password" placeholder="Password" name="password" id="password"/> 
    <input type="password" placeholder="Retype Password" name="retype_password" id="retype_password"/> 
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button> 
</form> 


<script> 
    (function($,W,D) 
    { 
     var JQUERY4U = {}; 

     JQUERY4U.UTIL = 
     { 
      setupFormValidation: function() 
      { 
       //form validation rules 
       $("#register-form").validate({ 
        rules: { 
         name: "required", 
         email: { 
          required: true, 
          email: true 
         }, 
         password: { 
          required: true, 
          minlength: 5, 
         }, 
         retype_password: { 
          equalTo :'#password' 
         } 
        }, 
        messages: { 
         name: "Please enter your name", 
         password: { 
          required: "Please provide a password", 
          minlength: "Your password must be at least 5 characters long", 
         }, 
         email: "Please enter a valid email address", 
         agree: "Please accept our policy" 
        }, 
        submitHandler: function(form) { 
         form.submit(); 
        } 
       }); 
      } 
     } 

     //when the dom has loaded setup form validation rules 
     $(D).ready(function($) { 
      JQUERY4U.UTIL.setupFormValidation(); 
     }); 

    })(jQuery, window, document); 
</script> 
</body> 
</html>

來源

2016-01-27 07:34:21

使用jQuery代碼，客戶端驗證

$(form).submit(function(e){ 
    if($("input[name='name']").val()=="") 
    { 
    e.preventDefault();//this will stop form from submitting 
    //show msg name is required 
    } 
});

來源

2016-01-27 07:27:23

提交表單前顯示用戶結束錯誤

回答

相關問題