jQuery serialize and validate data

Question

I have the following line returned from serializing data

rl=250&first_name=&surname=&email=&phone=&country_id=1&agency_name=&sitename=

I want to loop through these and check if there is an empty field and if there is then I can throw an error.

I can get the index and element but the element is rl=250 or first_name=

How can I check if the element is set or not. I have also tried using serializeArray() but it returns me [Object, Object, Object, Object, Object, Object, Object, Object] which should have the name and value but I do not know how to access these

You should validate your data before serialize it. You should post some relevant code. I guess basically checking using : `if(!$('#signup_form :input[value=""]').length)` , then serialize. If not, your FORM is not valid. And what about required attribute? Looks like to me an XY problem, you aren't asking the 'good' question — A. Wolff, Feb 28 '14 at 11:18

score 0 · Answer 1 · answered Feb 28 '14 at 11:12

0

You need to split this using '&'. Then you should apply for loop and in that loop you again need to split that string with '=' sign. Then if you get second element of loop as blank, you can throw error

answered Feb 28 '14 at 11:12

HB Kautil

267
1
6

score 0 · Answer 2 · answered Feb 28 '14 at 11:14

0

serializeArray is a good way.

https://api.jquery.com/serializeArray/

As you can see, it returns arrays of objects so in your case it is something like tihs:

[
{
 rl: 250
},

{
 first_name: undefined
}
]

After this you can iterate on the array of the objects with for loop on the values.

answered Feb 28 '14 at 11:14

Michał Lach

1,291
4
18
37

i have tried that but all i am getting is the [Object, Object.....] as I described. Would it be that i am serilizing the from via its id var str = $('#signup_form').serializeArray(); – Pierce McGeough Feb 28 '14 at 11:17
1

dos something like this: var data = $('#signup_form').serializeArray(); and loop thought it like data[i] – Michał Lach Feb 28 '14 at 11:18

score 0 · Answer 3 · edited May 23 '17 at 11:44

I found this function by Jack alan https://stackoverflow.com/a/16215183/1430587

function deparam(query) {
    var pairs, i, keyValuePair, key, value, map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === '?') {
        query = query.slice(1);
    }
    if (query !== '') {
        pairs = query.split('&');
        for (i = 0; i < pairs.length; i += 1) {
            keyValuePair = pairs[i].split('=');
            key = decodeURIComponent(keyValuePair[0]);
            value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
            map[key] = value;
        }
    }
    return map;
}

score 0 · Answer 4 · answered Oct 07 '15 at 15:02

You could do something like this:

$(document).ready( function(e) {

   $("#frm-login").submit(function() {  

    var DATA = $(this).serializeArray();

    len = DATA.length,
    dataObj = {};
    for (i=0; i<len; i++) { // acceesing data array
        dataObj[DATA[i].name] = DATA[i].value;
    }        

     if ( !dataObj['user-id'].trim()  ||  !dataObj['user-pass'].trim()  ) { //cheking if empty field
         alert('empty');
     }else{
         alert('full');
     }
    //console.log(DATA);
    $.ajax({
        type: "POST",
        url: 'user-login-process.php', 
        data: DATA,
        success: function(response){          
           //alert(response); // show response from the php script.
        }
    });

    return false; // avoid to run the actual submit of the form.
});


}); //document

jQuery serialize and validate data

4 Answers4