#1
  1. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,868
    Rep Power
    368

    [jQuery] Inline & external scripts not working together?


    Hi, I have a general validation script that goes over the form fields and validate and display errors. This is an external script that I use in all of my forms. However for a new form, I need to do some extra validation which i am doing inline but it doesnt seem to be working. ( i am calling external script BEFORE the inline). Both scripts below but if you dont want to read them the gist for both of them is:

    on form submit
    declare an error and put it as false
    go through form fields and see if they are null or invalid
    if they are put error = true, change border to red.

    if error = true then return false, otherwise return true

    external script
    Code:
    $(document).ready(function() {    
        $( "#main_form" ).submit(function() {
            
            var error = false;
            
            $("input[type=text]").each(function(){
                if( $(this).val() == "" ) {
                    $(this).siblings(".error_image").html('<img src="'+base_url+'images/incorrect.png"/>');
                    $(this).css("border","1px solid red");
                    error = true;
                } else {
                    $(this).siblings(".error_image").html('<img src="'+base_url+'images/correct.png"/>');
                     $(this).css("border","1px solid #CFCFCF");
                }
                $(this).siblings(".error_image").css("visibility","visible");
            });
            
            $("#main_form select").each(function(){
                if( $(this).attr("data-field") !== "optional" && $(this).val() == "" ) {
                    $(this).siblings(".error_image").html('<img src="'+base_url+'images/incorrect.png"/>');
                    $(this).css("border","1px solid red");
                    error = true;
                } else {
                    $(this).siblings(".error_image").html('<img src="'+base_url+'images/correct.png"/>');
                     $(this).css("border","1px solid #CFCFCF");
                }
                $(this).siblings(".error_image").css("visibility","visible");
            });
            
            var email =  $("input[name=email]").val();
            var email_check = /^[A-Za-z0-9_+-]+@[A-Za-z0-9-]+\.[A-Za-z]{2,6}$/ig;
            
            if ( !/^[A-Z0-9._+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/ig.test(email) ) {
                $("input[name=email]").siblings(".error_image").html('<img src="images/incorrect.png"/>');
                $("input[name=email]").siblings(".error_image").css("visibility","visible");
                $("input[name=email]").css("border","1px solid red");
                $("#email_errors").html("Email address is invalid");
                error = true;
            } else {
                $("input[name=email]").siblings(".error_image").html('<img src="images/correct.png"/>');
                $("input[name=email]").siblings(".error_image").css("visibility","visible");
                $("input[name=email]").css("border","1px solid #CFCFCF");
            }
            
            if ( !$("#main_form input[name=terms]").prop('checked')){
                $("#main_form input[name=terms]").parent().css("border","1px solid red");
                error = true;
            } else {
                $("#main_form input[name=terms]").parent().css("border", "1px solid #CFCFCF");
            }
            
            if ( $("input[name=confirm_email]").length > 0 ){
                var email_confirm = $("input[name=confirm_email]").val();
                if ( email != email_confirm || email_confirm == "" ){
                    $("input[name=confirm_email]").siblings(".error_image").html('<img src="images/incorrect.png"/>');
                    $("input[name=confirm_email]").siblings(".error_image").css("visibility","visible");
                    $("input[name=confirm_email]").css("border","1px solid red");
                    error = true;
                } else {
                    $("input[name=confirm_email]").siblings(".error_image").html('<img src="images/correct.png"/>');
                    $("#input[name=confirm_email]").siblings(".error_image").css("visibility","visible");
                    $("input[name=confirm_email]").css("border","1px solid #CFCFCF");
                }
            }
    
            
            if ($("input[name=telephone]").length > 0){
                var telephone = $("input[name=telephone]").val();
                //if ( !/[0-9\s]{1,11}/g.test(telephone) ) {
                if ( !/^[\d]{1,5}\s{0,1}\d{1,7}$/g.test(telephone) ) {
                    $("input[name=telephone]").siblings(".error_image").html('<img src="'+base_url+'images/incorrect.png"/>');
                    $("input[name=telephone]").siblings(".error_image").css("visibility","visible");
                    $("input[name=telephone]").css("border","1px solid red");
                    error = true;
                } else {
                    $("input[name=telephone]").siblings(".error_image").html('<img src="'+base_url+'images/correct.png"/>');
                    $("input[name=telephone]").siblings(".error_image").css("visibility","visible");
                    $("input[name=telephone]").css("border","1px solid #CFCFCF");
                }
            }
            
            var postcode = ""; 
            if ( $("input[name=postcode]").length > 0 ) {
                postcode = $("input[name=postcode]");
            } else if ( $("input[name=zipcode]").length > 0 ) {
                postcode = $("input[name=zipcode]");
            }
        
            if (postcode.length > 0){
                var postcode_value = $(postcode).val();
                if ( !/[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i.test(postcode_value) ) {
                    $(postcode).siblings(".error_image").html('<img src="'+base_url+'images/incorrect.png"/>');
                    $(postcode).siblings(".error_image").css("visibility","visible");
                    $(postcode).css("border","1px solid red");
                    error = true;
                } else {
                    $(postcode).siblings(".error_image").html('<img src="'+base_url+'images/correct.png"/>');
                    $(postcode).siblings(".error_image").css("visibility","visible");
                    $(postcode).css("border","1px solid #CFCFCF");
                }
            }
        
            if (!error){
                return true;
            }
            return false; 
        });
    });
    inline script
    Code:
    $(document).ready(function() {
    
    
    $("#date").selectbox({
        onChange: check_date
    });
    $("#month").selectbox({
        onChange: check_date
    });
    $("#year").selectbox({
        onChange: check_date
    });
    
    $("input[type='radio'], input[type='checkbox']").ionCheckRadio();
    
    
    $( "form" ).submit(function() {
    
        var msg = "";
        var error = false;
        if  ( !check_date() ) {
            
            $(".month-container > div").css("border", "1px solid red");
            $(".year-container > div").css("border", "1px solid red");
            $(".date-container > div").css("border", "1px solid red");
            error = true;
            
            msg += "Date is incorrect \n";
        
        } else {
            
            $(".month-container > div").css("border", "1px solid #BFBFBF");
            $(".year-container > div").css("border", "1px solid #BFBFBF");
            $(".date-container div").css("border", "1px solid #BFBFBF");
            
        }
        
        if ( $("#gender_miss").attr('checked') == undefined && $("#gender_ms").attr('checked') == undefined && $("#gender_mr").attr('checked') == undefined ) {
            
            $(".radio_box").css("border", "1px solid red");
            msg += "Select a title \n";
            error = true;
            
        } else {
            
            $(".radio_box").css("border", "none");
            
        }
        
        if ( $("#first_name").val().length <= 1 ) {
            
            $("#first_name").css("border", "1px solid red");
            error = true;
            msg += "First Name is incorrect \n";
        
        } else {
        
            $("#first_name").css("border", "1px solid #BFBFBF");						
        
        }
        
        if ( $("#last_name").val().length <= 1 ) {
            
            $("#last_name").css("border", "1px solid red");
            error = true;
            msg += "Last Name is incorrect \n";
        
        } else {
        
            $("#last_name").css("border", "1px solid #BFBFBF");						
        
        }
        
        if ( error ) {
            
            alert ("Please correct the following: \n" + msg );
            return false;
            
        } else {
            
            return true;
            
        }
    });
    });
    
    </script>
    Last edited by Winters; November 12th, 2013 at 08:27 AM.

IMN logo majestic logo threadwatch logo seochat tools logo