如何在HTML表单上实时显示错误？ （包括Javascript）

Question

I'm trying to show errors in real time on my registration form, instead of being redirected to another page (register.php).

The index page on my site has a sign-up link which opens a popup registration form (registration.HTML) in a new window. When a user submits this form it calls on register.PHP as an action. Inside register.php there is a line of code:

js_include('js/register.js');

This javascript checks that certain data is submitted correctly within registration.html. I'd like this check to be performed before submitting the form and causing it to redirect to register.php. I only need it to direct to register.php if javascript says everything is good.

You can test this yourself here If you click "sign up" in the top-right corner, and type in gibberish as the email and press Enter, it will redirect to register.php and show the error at the bottom (if you scroll down). I'd like this error to be displayed on the registration form.

I tried including the js below within some script tags on my html page, but it still redirects me.

Here is register.js, all feedback is welcome! Thank you

$(document).ready(function() {
    $('.formFieldWarning').hide();})

function checkRegisterFormSubmit() {
    $('.formFieldWarning').hide();
    var errors = 0;
    // Check the user name
    if($('#username').val() == '') {
        $('#username_warning1').show();
        errors++;
    } else {
        if ($('#username').val().length < 2 ) {
            $('#username_warning2').show();
            errors++;
        }
    }
    // Check the password
    if ($('#password').val().length < 2 ) {
        $('#password_warning1').show();
        errors++;
    } else {
        if ($('#password').val() == $('#username').val() ) {
            $('#password_warning2').show();
            errors++;
        }
    }
    // Check the password_verification
    if ($('#password_verification').val() != $('#password').val() ) {
        $('#password_verification_warning1').show();
        errors++;
    }
    // Check the email address
    if($('#email').val() == '') {
        $('#email_warning1').show();
        errors++;
    } else {
        if ($('#email').val().search(/^\w+((-|\.|\+)\w+)*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]{2,63}$/) == -1) {
            $('#email_warning2').show();
            errors++;
        }
    }
    if (errors != 0) {
        $('#form_not_submit_top').show();
        $('#form_not_submit_bottom').show();
        return false;
    } else {
        return true;
    }
}

Answer 1

Here is an example of how to test a form field using jQuery's blur() function -

$('input[name="foo"]').blur(function() {
  var currentValue = $(this).val();
  var testValue = 'crumple';
  if(currentValue != testValue) {
    $(this).next('span').html('FAIL');
  } else {
    $(this).next('span').html('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="foo" type="text" /><span></span>

</div>