使用PHP进行JQuery表单验证

Question

我在使用JQuery验证注册表单时遇到问题。 即使数据是正确的，它仍然不会regprocess.php

没有进展我认为一个错误是在检查有效标志的JavaScript部分，但我没有足够的经验知道它是什么是！

任何人都可以提供帮助吗？该PHP文件中

表

<form name="register" method="post" action="regprocess.php"> 
    <fieldset> 
     <legend>&nbsp;Registration Details&nbsp;</legend> 
    <ol style="list-style: none; padding-left: 10px;"> 
     <br> 
     <li> 
      <label for="username"><h3>Username:</h3>(Maximum 15 characters)</label> 
      <input class="username" type="text" title="Please enter a username less than 15 characters!" name="username" /> 
     </li> 
     <br> 
     <li> 
      <label for="password"><h3>Password:</h3>(Maximum 20 characters)</label> 
      <input class="password" type="password" name="password" title="Please enter a password less than 20 characters!"/> 
     </li> 
     <br> 
     <li> 
      <label for="password2"><h3>Confirm Password:</h3></label> 
      <input class="password" type="password" name="password2" title="Please confirm your password!" /> 
     </li> 
     <br> 
    </ol> 
    </fieldset> 
    <fieldset> 
     <legend>&nbsp;Name&nbsp;</legend> 
    <ol style="list-style: none; padding-left: 10px;"> 
     <br> 
     <li> 
      <label for="fname"><h3>First Name:</h3>(Maximum 50 characters)</label> 
      <input class="name" type="text" name="fname" title="There is a first name limit of 50 characters"/> 
     </li> 
     <br> 
     <li> 
      <label for="lname"><h3>Surname:</h3>(Maximum 50 characters)</label> 
      <input class="name "type="text" name="lname" title="There is a surname limit of 50 characters" /> 
     </li> 
     <br> 
    </ol> 
    </fieldset> 
    <br> 
    <input type="submit" name="submit" value="Create your account!" /><br><br> 
    Already a user? Log in <a class="link" href="register.php">HERE</a><br> 
</form> 

的JavaScript

$(function() { 
    $('input.username') //declares the input from the 'username' field 
    .blur(function() { //blur dictates when the user leaves the field 
     console.log('user has left the username field'); //sends information to the JS console 
     var username =$(this).val(); //data variable is equal to the trigger 
     console.log(username); //sends the data to the JS console 

     if (username.length > 15) { 
      console.log('invalid data'); //sends 'invalid data to the console if it is > 15 
      $(this).addClass('errorBorder'); 
      $(this).parent().children('label').addClass('errorText'); 
      $(this).after('<p class="red">Please enter a valid username!</p>'); //outputs an error message below the form 
      $(this).removeClass('valid'); 

     }else{ 
      console.log('valid data'); //sends 'valid' data to the console if it is < 15 
      $(this).removeClass('errorBorder'); 
      $(this).parent().children('label').removeClass('errorText'); 
      $('p').remove(); //removes the error message if valid data is input 
      $(this).addClass('valid'); 
     } 
     }); 
    }); 

    // PW11: password form validation 

    $(function() { 
    $('input.password') //declares the input from the 'password' field 
    .blur(function() { //blur dictates when the user leaves the field 
     console.log('user has left the password field'); //sends information to the JS console 
     var password =$(this).val(); //data variable is equal to the trigger 
     console.log(password); //sends the data to the JS console 

     if (password.length > 20) { 
      console.log('invalid data'); //sends 'invalid data to the console if it is > 20 
      $(this).addClass('errorBorder'); 
      $(this).parent().children('label').addClass('errorText'); 
      $(this).after('<p class="red">Please enter a valid password!</p>'); //outputs an error message below the form 
      $(this).removeClass('valid'); 
     }else{ 
      console.log('valid data'); //sends 'valid' data to the console if it is < 20 
      $(this).removeClass('errorBorder'); 
      $(this).parent().children('label').removeClass('errorText'); 
      $('p').remove(); //removes the error message if valid data is input 
      $(this).addClass('valid'); 
     } 
     }); 
    }); 

    // N1: name form validation 

    $(function() { 
    $('input.name') //declares the input from the 'name' class of field 
    .blur(function() { //blur dictates when the user leaves the field 
     console.log('user has left the name field'); //sends information to the JS console 
     var fname =$(this).val(); //data variable is equal to the trigger 
     console.log(fname); //sends the data to the JS console 

     if (fname.length > 50) { 
      console.log('invalid data'); //sends 'invalid data to the console if it is > 50 
      $(this).addClass('errorBorder'); 
      $(this).parent().children('label').addClass('errorText'); 
      $(this).after('<p class="red">Please enter a valid name!</p>'); //outputs an error message below the form 
      $(this).removeClass('valid'); 
     }else{ 
      console.log('valid data'); //sends 'valid' data to the console if it is < 50 
      $(this).removeClass('errorBorder'); 
      $(this).parent().children('label').removeClass('errorText'); 
      $('p').remove(); //removes the error message if valid data is input 
      $(this).addClass('valid'); 
     } 
     }); 


    // SP1: Submit Prevention 

    $('form[name="register"]').submit(function(event){ 
     alert('You must enter valid registration details!'); 
     var valid = true; 
     $('input[name="submit"]').each(function(){ 
      var data = $(this).val(); 
      console.log(data); 
      if (!$(this).hasClass('valid')) valid = false; 
     }); 
     console.log('valid:' + valid); 
     if (valid) 
     return true; 
     return false; 
    }); 

    }); 

Answer 1

其实很简单。您正在检查错误的输入（实际上只检查提交按钮）。您必须更改

$('input[name="submit"]').each(function(){ 

到

$('input[name!="submit"]').each(function(){