How to display error in real-time on HTML form? (Javascript included)

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;
    }
}

You need to either handle the click event associated with the submit function (prevent the default action of the button) or have the jQuery return the errors immediately, like when an element is blurred. — Jay Blanchard, Jan 02 '15 at 22:25
This may help you: http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery — Daniel Castro, Jan 02 '15 at 22:27

Jay Blanchard · Accepted Answer · 2015-01-02T22:37:34.477

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>

edited Jan 02 '15 at 22:37

answered Jan 02 '15 at 22:32

Jay Blanchard

34,243
16
77
119

Thank you, I ended up using a solution that I found from using your code, and searching in Google. – Nova Jan 03 '15 at 06:02

How to display error in real-time on HTML form? (Javascript included)

1 Answers1