CODEWITHSUNDEEP
javascriptformsvalidation
user1428451
user1428451

Reputation: 43

Validating individual form inputs with javascript

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!')
                         }

                  });
        }
    });

Upvotes: 0

Views: 141

Answers (2)

user1428451
user1428451

Reputation: 43

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

Upvotes: 0

Samurai
Samurai

Reputation: 3754

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

Upvotes: 1

Related Questions