Question

I keep trying to ask this question but then my code’s to long etc etc, I am going to try again.

Unfortunately I wasn’t able to summarize the code, but I would just like to know I have about 4 validation functions that return true or false, for example:

//Basic validation
    function validate_Email(email_values){
        var email_reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(email_reg.test(email_values) == false) {
            console.log('invalid email');
            return false;
        } else {
            console.log('valid email');
            return true;
        };
    };

    function validate_Cell(cell_values){
        if (cell_values.toString().length != 10) {
            return false;
            console.log('invalid cell');
        }else if (cell_values.toString().length = 10) {
            return true;
            console.log('valid cell');
        };
    };

    function validate_Pass(pass_values){
        if (pass_values.toString().length != 13) {
            console.log($(pass_values).toString().length);
            console.log(pass_values);
            return false;
            console.log('invalid passport');
        }else if (pass_values.toString().length = 13) {
            console.log(pass_values);
            return true;
            console.log('valid passport');
        };
    };

    function validate_Code(code_values){
        if (code_values.toString().length != 4) {
            console.log($(code_values).toString().length);
            console.log(code_values);
            return false;
            console.log('invalid passport');
        }else if (code_values.toString().length = 4) {
            console.log(code_values);
            return true;
            console.log('valid codes');
        };
    };
//Basic Validation

And here’s an example of how the email is validated:

$(document).on('blur', 'input.email', function() {
    var $this = $(this);
    var input_groups = $this.parent();
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
            }).join('');
            validate_Email(email_values, input_groups.parent().parent().parent());
        });
    });

I also have some other more complicated validations that return true or false. I just want to know how to not send if any are false.

Here’s how I get and send the data:

//Get Field Values
var result = {};
var dependants;
var mainmember;
var dep_counter = 0;
function getValues(){
    jQuery('div[class*="mainmember"]').each(function(k, v){
        mainmember = {};
        mainmember['name'] = $(v).find('.main_name').val();
        mainmember['surname'] = $(v).find('.main_surname').val();
        mainmember['id'] = ''; 
        $(v).find('.id').each(function(){
          mainmember['id'] += $(this).val(); 
        });
        mainmember['age'] = ''; 
        $(v).find('.age').each(function(){
          mainmember['age'] += $(this).val(); 
        });
        mainmember['gender'] = $(v).find('.gender').val();
        mainmember['townofbirth'] = $(v).find('.main_town').val();
        mainmember['email'] = $(v).find('.email').val();
        mainmember['contact'] = ''; 
        $(v).find('.cell').each(function(){
        mainmember['contact'] += $(this).val(); 
        });
        mainmember['passport'] = ''; 
        $(v).find('.pass').each(function(){
          mainmember['passport'] += $(this).val(); 
        });
        mainmember['postal'] = $(v).find('.main_postaladdress').val();

        mainmember['residential_code'] = ''; 
        $(v).find('.res_code').each(function(){
          mainmember['residential_code'] += $(this).val(); 
        });

        mainmember['postal_code'] = ''; 
        $(v).find('.post_code').each(function(){
          mainmember['postal_code'] += $(this).val(); 
        });

        mainmember['residential'] = $(v).find('.main_residential').val();
        result['mainmember'] = mainmember;
    });

    result['dependants'] = [];
    jQuery('div[class*="dependant"]').each(function(k, v){
        dep_counter++
        dependants = {};
        dependants['name'] = $(v).find('.name').val();
        dependants['surname'] = $(v).find('.surname').val();

        dependants['id'] = ''; 
        $(v).find('.id').each(function(){
          dependants['id'] += $(this).val(); 
        });

        dependants['age'] = ''; 
        $(v).find('.age').each(function(){
          dependants['age'] += $(this).val(); 
        });

        dependants['gender'] = $(v).find('.gender').val();
        dependants['townofbirth'] = $(v).find('.town').val();

        dependants['cell'] = '';
        $(v).find('.cell').each(function(){
          dependants['cell'] += $(this).val(); 
        });

        dependants['email'] = $(v).find('.email').val();

        dependants['passport'] = '';
        $(v).find('.pass').each(function(){
          dependants['passport'] += $(this).val(); 
        });

        dependants['relationship'] = $(v).find('.relationship:checked').val();
        result['dependants'].push(dependants);
    });
};
//Get Field Values

//submit function
jQuery('#submit').click(function(){
    getValues();
    var jsonData = JSON.stringify(result);
    jQuery.ajax({
        type: "POST",
        url: "mail.php",
        dataType: "json",
        beforeSend: function() {
        },
        data: {parameters: jsonData}
    });
    console.log('Sending error');
    console.log(jsonData);
});
//submit function

Here’s the full code (WARNING ITS A LOT OF CODE): http://jsfiddle.net/dawidvdh/tphjh/

Any Help Greatly Appreciated. 🙂

Answer 1

Edit 1

With your updated code, my suggestion would be to call the same validation logic when the user attempts to submit the form. You need to indicate to the user when there’s a problem, i.e., highlight the input with a red background, or display an error popup, etc.

Currently your code to validate email, for example, only runs when the user clicks out of an email input box they were typing in:

$(document).on('blur', 'input.email', function() {
    var $this = $(this);
    var input_groups = $this.parent();
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        validate_Email(email_values, input_groups.parent().parent().parent());
    });
});

First, I would refactor this logic into a separate method that can be shared and re-used between the live validation that happens during form entry, and the validation you’re going to add during form submit:

function validate_Email_Input(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid &&
            validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}

Then your live email validation would be converted to this:

$(document).on('blur', 'input.email', function() {
    validate_Email_Input(this);
});

And you could run this same validation logic inside your submit function like this:

var isValid = true;

$('input.email').each(function(i, el) {
    isValid = isValid &&
        validate_Email_Input(el);
});

Here I’m running through the same validation of all the email inputs, and setting the value of field isValid based on whether all of them are valid email entry. You could apply this same format to all your other on('blur'...) or on('keyup'...) validation functions, by running the same validation logic during the form submission. Then use the same idea I presented below to only submit the form if all the validations pass.

Demo with email validation: http://jsfiddle.net/BQdQc/2/

This should get you started. Note that your logic may not be this simple, if the entire form doesn’t have to be filled out. For instance, if it’s not required to fill out every email address, you may have to adjust the code to only validate email if the first/last name are also filled in. You will have to think through this logic based on your requirements. Hope this helps!

---

Inside your submit function, you need to check your validation logic and cancel the submission if there are validation errors. Also, you’ll want to provide some sort of user feedback that they need to resolve a problem in the form:

jQuery('#submit').click(function() {
    if (validate_Email(blah) && validate_Pass(blah) &&
        validate_Cell(blah2) && validate_Cell(blah3) ...) {

        // proceed with jQuery.ajax post

    } else {

        // display error message to user

    }
}

You can also formulate it this way to avoid building a giant if statement:

isValid = true;
isValid = isValid && validate_Email(blah);
isValid = isValid && validate_Cell(blah2);
if (!some_complicated_function(blah3))
    isValid = false;
isValid = isValid && validate_Pass(blah3);
// etc.

if (isValid) {
    // proceed with jQuery.ajax post
} else {
    // display error message to user
}