JQuery Form Validation with PHP

Question

I'm having trouble validating a registration form with JQuery. Even if the data is correct, it still will no progress to regprocess.php

I think an error is during the part of the JavaScript that checks for the valid flag, but I'm not experienced enough to know what it is!

Can anyone provide assistance?

Form in the PHP document

<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

Actually it is simple. You are checking wrong inputs(actually checking only submit button). You must change

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

to

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