使用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(){