Powered By Blogger

Thursday, August 8, 2019

jQuery form Validation


    //google re-captcha - Idea Factory page
    jQuery( "#submitbutton" ).click(function( event ) {
        event.preventDefault();
        var vali = true;

        var $captcha = jQuery( '#recaptcha' ),
        response = grecaptcha.getResponse();

        var name = jQuery('#formName').val();
        var email = jQuery('#formEmail').val();
        var phone = jQuery('#formPhone').val();
        var zip = jQuery('#formZipCode').val();
        var idea = jQuery('#formComment').val();

        //name validation
        if (name.length === 0) {
          jQuery( '.name-error').text( "Name is mandatory" );
          vali = false;
        }else if( !/^[a-zA-Z\s]+$/.test(name) ){
          jQuery( '.name-error' ).text("Invalid Name" );
          vali = false;
        }else{
          jQuery( '.name-error' ).text('');
          vali = true;
        }

        //email validation
        var efilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        if (email.length === 0) {
          jQuery( '.email-error').text( "Email is mandatory" );
          vali = false;
        }else if( !efilter.test(email) ){
          jQuery( '.email-error' ).text("Invalid Email Address" );
          vali = false;
        }else{
          jQuery( '.email-error' ).text('');
          vali = true;
        }

        //Phone Number validation
        var pfilter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
        if (phone.length === 0) {
          jQuery( '.phone-error').text( "Phone Number is mandatory" );
          vali = false;
        }else if( !pfilter.test(phone) ){
          jQuery( '.phone-error' ).text("Invalid Phone Number" );
          vali = false;
        }else if(phone.length < 10 ){
          jQuery( '.phone-error' ).text("Phone Number is minimum of 10 characters" );
          vali = false;
        }else{
          jQuery( '.phone-error' ).text('');
          vali = true;
        }

        //Zip Code validation
        var zfilter = /^\d{5}(?:-\d{4})?$/;
        if (zip.length === 0) {
          jQuery( '.zip-error').text( "Zip Code is mandatory" );
          vali = false;
        }else if( !zfilter.test(zip) ){
          jQuery( '.zip-error' ).text("Invalid Zip Code" );
          vali = false;
        }else if(zip.length < 5 ){
          jQuery( '.zip-error' ).text("Zip Code is minimum of 5 characters" );
          vali = false;
        }else{
          jQuery( '.zip-error' ).text('');
          vali = true;
        }

        //idea text area validation
        if (idea.length === 0) {
          jQuery( '.idea-error').text( "Ideas and Comments is mandatory" );
          vali = false;
        }else if(idea.length < 15 ){
          jQuery( '.idea-error' ).text("Ideas and Comments is minimum of 15 characters" );
          vali = false;
        }else{
          jQuery( '.idea-error' ).text('');
          vali = true;
        }

        //check agree validation
        if (($("input[name*='check-agree']:checked").length)<=0) {
          jQuery( '.agree-error').text( "Agree is mandatory" );
          vali = false;
        }else{
          jQuery( '.agree-error' ).text('');
          vali = true;
        }
   
     if (response.length === 0) {
          jQuery( '.msg-error').text( "reCAPTCHA is mandatory" );
          if( !$captcha.hasClass( "error" ) ){
            $captcha.addClass( "error" );
          }
        } else {
          jQuery( '.msg-error' ).text('');
          $captcha.removeClass( "error" );

          if (vali == true) {
            jQuery( "#gear-contact-feedback" ).submit();
          }   
        }

    });

No comments:

Post a Comment