2017-09-04 51 views
-1

我想提交沒有填寫數據的表單,請提供一個名字的提醒,但是當我點擊確定提醒它重定向到pass2.php,它不應該像這樣發生。我的意思是它應該保持在同一頁面,即pass.php我的頁面在沒有任何驗證的情況下重定向php

這裏是我的pass.php

<?php session_start();?> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/bootstrap.css" rel="stylesheet" /> 
    <link href="css/bootstrap-theme.css" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $("#submit").click(function(){ 
    var name = document.getElementById('name').value; 
    var address = document.getElementById('address').value; 
    var city = document.getElementById('city').value; 
    var country = document.getElementById('country').value; 
    var lname = document.getElementById('lname').value; 
    var phone = document.getElementById('phone').value; 
    var state = document.getElementById('state').value; 
    var zip = document.getElementById('zip').value; 
    if(name.length == 0) 
    { 
    alert("please provide a first name"); 
    } else if(address.length == 0) 
    { 
    alert("Please provide a Address"); 
    }else if(city.length == 0) 
    { 
    alert("Please provide a city name"); 
    }else if(country.length == 0) 
    { 
    alert("Please provide a country name"); 
    }else if(lname.length == 0) 
    { 
    alert("Please provide a last name "); 
    }else if(phone.length == 0) 
    { 
    alert("Please provide a phone number"); 
    }else if(state.length == 0) 
    { 
    alert("Please provide a state name"); 
    }else if(zip.length == 0) 
    { 
    alert("Please provide a zip code"); 
    } 
    }); 
    }); 

    function validateEmail(emailField){ 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

    if (reg.test(emailField.value) == false) 
    { 
     alert('Invalid Email Address'); 
     return false; 
    } 

    return true; 
    } 
    </script> 
    </head> 
    <script src="js/bootstrap.min.js"></script> 
    <body> 
    <form action="pass2.php" method="POST"> 
    <div style="width:800px;"> 
    <div style="float:left;width:350px;"> 
    <div class="container-fluid"> 
    <div class='container'> 
    <div class="form-group"> 
    <label for='name' >First Name*: </label><br/> 
    <input type='text' name='name' id='name' class="form-control" style="width:20%;" 
    maxlength="50" 
    value="<?php if(isset($_POST['name'])) { echo htmlentities($_POST['name']);}?>"/> 
    <br /> 
    <span id='contactus_name_errorloc' class='error' style="font-size: 12px;"></span> 
    </div> 
    </div> 
    <div class='container'> 
    <label for='email' >Email Id*:</label><br/> 
    <p id="demo"> 
    <input type='text' name='email' id='email' maxlength="50" 
    onblur="validateEmail(this);" /><br/> 
    </div> 
    </p> 
    <span id='contactus_email_errorloc' class='error' 
    style="font-size: 14px;color:#D32626;background-color: #fff;font-weight: 800;"></span> 
    <div class='container'> 
    <label for='name' >Address*: </label><br/> 
    <input type='text' name='address' id='address'maxlength="50" /> 
    <br/> 
    </div> 
    <div class='container'> 
    <label for='country' >City*:</label><br/> 
    <input type='text' name='city' id='city' maxlength="50" /><br/> 
    </div> 
    <div class='container'> 
    <label for='country' >Country*:</label><br/> 
    <input type='text' name='country' id='country' maxlength="50"/> 
    <br/> 
    <span id='contactus_country_errorloc' class='error' style="font-size: 12px;"></span> 
    </div> 
    <input type="submit" id= "submit" name="submit" value="Submit"/> 
    </div> 
    </div> 
+0

順便說一句,你的html代碼不完整。 – reporter

回答

0
$(document).ready(function(){ 
      $("form").submit(function(e){ 
       var name = document.getElementById('name').value; 

       var address = document.getElementById('address').value; 
       var city = document.getElementById('city').value; 
       var country = document.getElementById('country').value; 
       var lname = document.getElementById('lname').value; 
       var phone = document.getElementById('phone').value; 
       var state = document.getElementById('state').value; 
       var zip = document.getElementById('zip').value; 
     if(name.length == 0) 
     { 
      e.preventDefault(); 
      alert("please provide a first name"); 
     } else if(address.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a Address"); 

     }else if(city.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a city name"); 
     }else if(country.length == 0) 
     { 
      alert("Please provide a country name"); 
     }else if(lname.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a last name "); 
     }else if(phone.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a phone number"); 
     }else if(state.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a state name"); 
     }else if(zip.length == 0) 
     { 
      e.preventDefault(); 
      alert("Please provide a zip code"); 
     } 

首先創建JS檢查的形式提交功能,然後使用JS事件對象,以防止從形式提交,如果有錯誤在裏面。

1

您處於onsubmit事件的回調範圍內,因此您也可以通過取消事件,以免表單被提交。更改

$("#submit").click(function(){ 

$("#submit").click(function(event){ 

,然後利用一切不順心的事時(用戶未填寫任何東西,字段缺失等)

event.preventDefault() 
相關問題