Проверка на стороне клиента Javascript с помощью PHP

Question

Ниже приведена некоторая проверка javascript. У меня есть простая форма. В первый раз, когда я нахожусь, отправьте подтверждение, и сообщения об ошибках и об ошибках. Если я получаю сообщение об ошибке, введите новые значения, которые все еще неверны, и нажмите «отправить» снова, проверка не работает, и значения передаются в мою форму php.

Вот Javascript

<script type="text/javascript" language="javascript"> 
<!-- 
function validateMyForm () { 
    var isValid = true; 
    if (document.form1.gamedate.value === "Select One") { 
      document.getElementById("errorMessage").innerHTML = ("Please select a game"); 
      isValid = false; 
    } else if (document.form1.wteam.value === "Select One") { 
      document.getElementById("errorMessage").innerHTML = ("Please select the winning team"); 
      isValid = false; 
    } else if (document.form1.wscore.value === "Select One") { 
      document.getElementById("errorMessage").innerHTML = ("Please select the winning score"); 
      isValid = false; 
    } else if (document.form1.lscore.value === "Select One") { 
      document.getElementById("errorMessage").innerHTML = ("Please select the losing score"); 
      isValid = false; 
    } else if (document.form1.wscore.value <= document.form1.lscore.value){ 
      document.getElementById("errorMessage").innerHTML = ("Winning score must be larger than the losing score"); 
      isValid = false; 
    } 
    return isValid; 
} 
//--> 
</script> 

PHP формы с *******, чтобы удалить некоторые данные

<form action="*********" method="post" name="form1"> 
     <div class="form-group"> 
      <label>Game Date:</label> 
      <select name="gamedate"> 
       <option>Select One</option> 
       <?php 
       $stmt = $db->prepare("***********)"); 
       $stmt->execute(array(':**********' => $_SESSION['**********'])); 
       while($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
       echo '<option value="'; 
       echo $row['*********']; 
       echo '">'; 
       echo $row['*********']; 
       echo '</option>'; 
       } 
       ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label>Winning Team</label> 
      <select name="wteam"> 
       <option>Select One</option> 
       <option value="1">Home</option> 
       <option value="0">Opponent</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label>Winning Score</label> 
      <select name="wscore"> 
       <option>Select One</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option>   
      </select> 
     </div> 
     <div class="form-group"> 
      <label>Losing Score</label> 
      <select name="lscore"> 
       <option>Select One</option> 
       <option value="0">0</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       <option value="4">4</option> 
       <option value="5">5</option> 
       <option value="6">6</option> 
       <option value="7">7</option> 
       <option value="8">8</option> 
       <option value="9">9</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
      </select> 
     </div> 
     <div class="form-group"> 
     <input type="submit" value="Submit" onclick="javascript:return validateMyForm();">  
</form> 

Любые мысли о том, что я делаю не так?

Answer 1

проверки Javascript отлично, однако вы также должны делать те же шаги проверки в вашем PHP обработчик формы. Затем, если он не пройдет проверку с обработчика формы PHP, вы снова перенаправляетесь на страницу с вашей формой. Предпочтительно предварительно заполнять допустимые поля и указывать, какие поля необходимо исправить.

Проверка Javascript должна рассматриваться как ДОБАВЛЕНИЕ к проверке на стороне сервера.

@danl Вот некоторые основные проверки PHP. Я не уверен, какой формат должен быть для вашей переменной gamedate. Остальные очень просты.

$haserror=false; 

$gamedate=$_POST['gamedate']; 
//not sure what is valid for gamedate. But you should check it against something 
if(strlen($gamedate)<1){ 
    $haserror=true; 
    $errordetail.=' Game Date must be selected'; 
} 

$wteam=$_POST['wteam']; 
if(!(($wteam==1) || ($wteam==0))){ 
    $haserror=true; 
    $errordetail.=' Winning team must be selected'; 
} 

$wscore=$_POST['wscore']; 
if(!is_numeric($wscore)){ 
    $haserror=true; 
    $errordetail.=' Winning score does not appear to be a valid number'; 
} 
$lscore=$_POST['lscore']; 
if(!is_numeric($lscore)){ 
    $haserror=true; 
    $errordetail.=' Losing score does not appear to be a valid number'; 
} 

if($lscore > $wscore){ 
    $haserror=true; 
    $errordetail.=' Losing score should not be more than the winning score.'; 
} 

if($haserror){ 
    echo $errordetail; 
    exit(); 
} 
else{ 
    echo' Success! . Process the data here'; 
} 

Answer 2

Ваша функция проверки вызывается из-за неправильного места. Он должен быть вызван из onsubmit метода формы, а не представлять onclick метод баттона:

<form action="*********" method="post" name="form1" onsubmit="return validateMyForm()"> 

Answer 3

Вы пытаетесь захватить значение в раскрывающемся списке в вашем JavaScript, но тогда вы сравниваете его с текстом в раскрывающемся списке. Либо присвойте значения параметрам раскрывающегося списка по умолчанию, либо сравните их, либо измените свой javascript, чтобы захватить текст (например, «Выбрать один»).