Validating individual form inputs with javascript

Question

I have a registration form that validates a text field, if it's empty when a user clicks/tabs off which shows an error message. My issue with the below code is its a lot to duplicate across several form fields. The below example is for first name but I can't see a way of using what I have to do the same for more than one field.

            /* this will call ajax call after entering all the below three fiels */
    var $fields = $('#testid');
    $fields.live('blur',function(e) {
        e.preventDefault();
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === "";
        });

        if ($emptyFields.length) {

                var frm = $(this).parents('form');
                var url=$('#valNameEmail').val();
                jQuery.ajax({
                         url: url,
                         data: $(this).parents('form').serialize(),
                         type: 'POST',
                         dataType: "json",
                         success: function(response){
                            if (response.HtmlMessage === 'success'){
                                $('.reg-alreadyRegistered').html('');
                                $('.reg-alreadyRegistered').css('display', 'none');
                                 ACC.registration.tickIcon($('#testid'));

                                 var radioExCustValue = $('#registration-form input[name=existingCustomer]:checked').val();
                                 if (userNameAjax === true) {
                                     if (radioExCustValue == 'false'){
                                         $('#regFormSubmit').removeAttr('disabled');
                                     }
                                     else {
                                         if (customerValidation == true){
                                             $('#regFormSubmit').removeAttr('disabled');
                                         }
                                     }
                                 }
                                 emailIDajax = true;
                             } else {
                                 ACC.registration.errorIcon($('#testid'));


                                 $('.reg-alreadyRegistered').html(response.HtmlMessage);
                                 $('.reg-alreadyRegistered').css('display', 'block');
                                 emailIDajax = false;
                                 $('#regFormSubmit').attr('disabled','disabled');
                             }
                         },
                         error: function(){
                                //alert(response);
                                //console.log('ERROR!')
                         }

                  });
        }
    });

what exactly you need now?? validating more than one text field or sending more data to backend?? — Prasanna Kumar H A
– Prasanna Kumar H A, Commented May 8, 2015 at 6:35
validate each form input independently when a user either clicks off or tabs off the input field. — user1428451
– user1428451, Commented May 8, 2015 at 6:38
Means you need to validate different forms at a time or on a single click ? — Prasanna Kumar H A
– Prasanna Kumar H A, Commented May 8, 2015 at 6:44
Can you show a bit more of your code? When is this code being triggered? — Sjors
– Sjors, Commented May 8, 2015 at 6:44
Ive edited the code to demonstrate sort of what I'm was looking for.. a global ID for the inputs that shoots off the error when you focus out of the input — user1428451
– user1428451, Commented May 8, 2015 at 8:32

Samurai · Accepted Answer · 2015-05-08 07:05:17Z

You can give the same inputs that require same sort of validation a class (or if you want it for example for all input[type=text] then you can use it for the selector.

So let's say I have a form like this:

<form id="mform">
    <input type="text" class="inptxt" name="it1" />
    <input type="text" class="inptxt" name="it2" />
    <!-- other similar text inputs with the same class -->
    <input type="submit" id="sub" value="Submit" />
</form>

I have a function for text inputs which returns false if the field is empty, otherwise true:

$.fn.isValid = function() {
    return $.trim($(this).val());
}

And then I get the inputs by class and validate them all at once:

$('#mform').on('submit', function(e) {
    e.preventDefault();
    var allValid = true;
    $('.inptxt').each(function() {
        if (!$(this).isValid()) {
            $(this).css('background-color', 'red');
            allValid = false;
        }
        else
            $(this).css('background-color', 'white');
    });
    if(allValid) {
        //everything's valid ... submit the form
    }
});

jsfiddle DEMO

user1428451 · Accepted Answer · 2015-05-14 14:53:49Z

0

This worked for me:

$('#registration-form input').blur(function(){
    if( $(this).val().length === 0 ) {
            ACC.registration.errorIcon($(this));
    }
        else{
            ACC.registration.tickIcon($(this));
        }
    });

thanks for your help

answered May 14, 2015 at 14:53

user1428451

436 bronze badges

Collectives™ on Stack Overflow

Validating individual form inputs with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related