JS form Validation

validating separate sections of a form and individual fields

by lee_gladding

HTML

<form enctype="multipart/form-data" method="post" class="cart" action="/hardy-group/product/manual-handling-3/?add-to-cart=414" style="background: none repeat scroll 0% 0% transparent;">
<div class="single-attendee-wrapper item1">
        <div class=" product-addon product-addon-one-attendee" style="display: block;">
        <h3 class="addon-name">One Attendee </h3>
                        <p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required">
                                <label>Candidate Name </label> <input type="text" value="" name="addon-414-one-attendee-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;">
                        </p>
                        <p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required">
                                <label>Address </label> <input type="text" value="" name="addon-414-one-attendee-address" data-price="" class="input-text addon addon-custom">
                        </p>
                        <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-validated">
                                <label>Candidate Email </label> <input type="text" value="" name="addon-414-one-attendee-candidate-email" data-price="" class="input-text addon addon-custom">
                        </p>
                        <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field">
                                <label>Phone </label> <input type="text" value="" name="addon-414-one-attendee-phone" data-price="" class="input-text addon addon-custom">
                        </p>
                        <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field">
                                <label>N.I Number...

CSS

.single-attendee-wrapper .count{
    background: none repeat scroll 0% 0% rgb(237, 97, 106); 
    color: rgb(255, 255, 255);
}

.single-attendee-wrapper .count.blockError{
    background: #D1D3D4;
    color: #808285;
}
input{
    border: #999 1px solid;
}
.itemError{
    border: red 1px solid;
}

JavaScript

$('form.cart')

        /* start ! This section adds & removes red backgroud and border */
        .on( 'blur change', '.input-text', function() {
                var validated = true,
                    $singleAttendeeWrapper = $(this).closest('.single-attendee-wrapper'),
                    $singleAttendeeWrapperItems = $singleAttendeeWrapper.find('.input-text'),
                    $singleAttendeeWrapperCount = $singleAttendeeWrapper.children('.count');
                
                $singleAttendeeWrapperItems.each(function(){
                        var $this = $(this);
                        
                    if ( $this.val() === '' ) {
                        
                        $(this).addClass('itemError');
                        validated = false;
                        
                    }else{
                        $(this).removeClass('itemError');
                    }
                        

                });
            
                if ( !validated ) {
                            
                    $singleAttendeeWrapperCount.addClass('blockError');
                
                }else{
                    
                    $singleAttendeeWrapperCount.removeClass('blockError');
                    
                }

        } );