CODEWITHSUNDEEP
javascriptjqueryajaxdjangovalidation
Muhammad Taqi
Muhammad Taqi

Reputation: 5424

JavaScript form validation improvement

I have a user profile form with 15 text fields and some dropdown and an textarea. the scene is that user can input field in profile form. On save it is no necessary to fill all fields, whatever the user fills in fields i have to validate and save in database via ajax call.

for now i am using validation like this,

    var first_name = document.getElementById('id_candidate_profile-first_name').value;
    ....
      var status = false;

if(first_name != ''){
    status = regex_test(first_name, ck_name);
    if(status==false){
        document.getElementById('candidate_profile_error-first_name').innerHTML = "first name should only have alphabets";
    }
    else{
        status = true;
    }
}

if(middle_name != "" & status = true){
    status = regex_test(middle_name, ck_name);
    if(status==false){
        document.getElementById('candidate_profile_error-middle_name').innerHTML = "middle name should only have alphabets";
    }
    else{
        status = true;
    }
}

if (last_name != '' & status = true){
    status = regex_test(last_name, ck_name);
    if(status==false){
        document.getElementById('candidate_profile_error-last_name').innerHTML ="last name should only have alphabets";
        }
    else{
        status = true;
    }
}

if (date_of_birth != '' & status = true){
    status = regex_test(date_of_birth, ck_date);
    if(status==false){
        document.getElementById('candidate_profile_error-date_of_birth').innerHTML ="date of birth should be in YYYY-MM-DD format";
        }
    else{
        status = true;
    }
}
if (birth_place != '' & status = true){
    status = regex_test(birth_place, ck_name);
    if(status==false){
        document.getElementById('candidate_profile_error-birth_place').innerHTML ="birth_place should only have alphabets";
        }
    else{
        status = true;
    }
}

if (nic != '' & status = true){
    status = regex_test(nic, ck_name);  
    if(status==false){
        document.getElementById('candidate_profile_error-nic').innerHTML ="nic should be in this format 12345-1234567-1";
        }
    else{
        status = true;
    }
}

if (status = true) {
// made ajax call
}


function regex_test(variable, regex){
    var _result = false;
    if(!regex.test(variable)){
        _result =  false;
        }
    else {
        _result = true;
        }
    return _result;
}

Can be seen that there are lots of nested if else involved that irritate me, need some better way to do this? any best alternative?

Upvotes: 0

Views: 57

Answers (2)

connexo
connexo

Reputation: 56754

You could create an array of validation objects, each object containing properties reg_ex, field, error_msg_container_id and error_msg: 

var validationRules = [
    { reg_ex: first_name,
      field: ck_name,
      error_msg_container_id: candidate_profile_error-first_name,
      error_msg: "first name should only have alphabets" },
    { reg_ex: date_of_birth,
      field: ck_date,
      error_msg_container_id: candidate_profile_error-date_of_birth,
      error_msg: "date of birth should be in YYYY-MM-DD format" }
];

In the validation function, you just iterate through the whole array. That also makes it easier to maintain further input fields which you might add later.

P.S.: If you don't know how to iterate over an array, let me know.

Edit: Since requested by OP, an iteration function would look similar to this:

function isFormDataValid() {
    for (i=0; i< validationRules.length; i++) {
        // do the validation inside here, it will be repeated once for each validation rule;
    }
    return status;
}

In case you need variable property names from the array to read/write, use this syntax

Object[variable]

where variable contains the string that is the name of the property you need to access.

var myObject = {
  name: "peter",
  age: 46
};

var validationRules = [ { fieldname: 'name'}, { fieldname: 'age' } ];


for (var i=0; i< validationRules.length; i++) {
  alert(myObject[validationRules[i].fieldname]);
}

Upvotes: 2

Mateusz Soltysik
Mateusz Soltysik

Reputation: 805

You can use any form validation library. I personally recommend Parsley.

There's a simple validation form example: http://parsleyjs.org/doc/examples/simple.html

Upvotes: 0

Related Questions