Julian Julian - 3 months ago 16
jQuery Question

Submit Form Validation

I'm trying to check whether if a

input[required]
has a value, if not then don't submit the form and throw back errors and if all are filled in the submit the form.
I believe it's an issue with my
return false
not being in the correct place.

JavaScript:

$('#MyForm').bind('submit', function() {

$('#MyForm input[required]').each(function() {
var hasValue = $(this).val().length;
var hasRequired = $(this).prop('required');
var inputClass = '#error-' + $(this).attr('name');

function validator() {
if( hasValue == 0 ) {
console.log('Step 1');
$(inputClass).show();
$(this).addClass('error')
} else {
console.log('Step 2');
$(inputClass).hide();
$(this).removeClass('error')
}
}
if( validator() == true ) {
console.log('Form Submitted');
// $('#myForm').submit();
}
});

return false;
});


Example HTML:

<form class="contact-form" id="MyForm" role="form" method="POST" action="" novalidate="novalidate">
<div class="group">
<label for="first_name">First Name *</label>
<input type="text" id="first_name" name="first_name" placeholder="First Name" required="" aria-required="true">
</div>
<div class="group">
<label for="last_name">Last Name *</label>
<input type="text" id="last_name" name="last_name" placeholder="Surname" required="" aria-required="true">
</div>
<input id="submit" name="submit" type="submit" value="Send" class="btn">
</form>

Answer

You can make it in more organised way, add more rules for other form fields( like, emails, phone etc. ) if you want. I also added error class to the parent so that you can style it in your own way.

jQuery(document).ready(function($) {

     $('#MyForm').on('submit', function(){
        var form = this;
        if(validateForm(form)) {
            // Validation pass.  you can process your form
            alert('Form validated');
        }
        else{
            event.preventDefault();
            return false;
        }
      });

        function validateForm(form) {
            valid = true;

            $(form).find('input[type=text], input[type=email]').each(function(i, val){
                if(validateField(val, true) == false) { valid = false; }
            });

            return valid;
        }
        function validateField(field, submit) {
            var val = $(field).val();
            if($(field).attr('aria-required') == 'true' && submit){
                if(val == '') {
                    $(field).parent().removeClass('valid');
                    $(field).parent().addClass('error');
                    return false;
                }else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'text') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
            }
        }

    });

JSfiddle link: https://jsfiddle.net/afsgp2bj/2/