How to validate and submit N number of input fields with various Type to Rest Service?

Question

I am creating a dynamic HTML form with N number of input fields and their input types also varies. I need to validate all fields before submit the form data to Rest Service in key value format. On form button click i am doing this

var data;
var submit = 0;
var formField = [];
var i = 0;
$('form input').each(function() {
        if ($(this).val().length == "0") {
                    submit = 1;
            } else {
                    formField[i] = $(this).val();
            }
i++;
            });
    if (submit == 0) { 
//if submit == 0 submit the form

data = {"credentialFields[0].value" : formField[0],
        "credentialFields[1].value" : formField[1],
        "credentialFields[2].value" : formField[2],     
    };

There i have problem like i am not able to use HTML5 native validation because i am not using button type="submit" and i am not able to validate input types like radio, checkbox and select. please suggest me the best solution for this problem.

What kind of validation do you need to do for these fields, and why can't you use jQuery for getting their values to check? — Scott Hunter
if HTML5 validation is possible that's fine or manual validation also fine. I am using the Jquery to get fields value, please have a look again. — Sandeep vashisth
i find the way but still am not able to parse the form data into json object $('form').submit(function(event){ // cancels the form submission event.preventDefault(); // SUBMIT THE FORM }); — Sandeep vashisth
You don't say anything about the validation you need to do, so I have no idea what kind of help you expect, since you already know how to get the data to be validated. Now you talk about parsing data into a JSON object, which had nothing to do with the original question. — Scott Hunter
My question is still same i asked how to validate N number of fields with different input type and then passing their values to Rest Service using JSON object in above format. Now i know How to validate but still don't have idea to get their values in JSON object after validation. — Sandeep vashisth

Sandeep vashisth Sandeep vashisth · Accepted Answer · 2014-01-05T14:54:34

    <form id="myForm" method="POST">
        <textarea name='area2' required>some textarea</textarea>
        <input type='text' name='text1' required />
        <input type='text' name='text2' value='some text' required />
        <input type='radio' name='radio' value='radio1' required/>
        <input type='radio' name='radio' value='radio2' required/>
        <input type='checkbox' name='checkbox1' value='checkbox1' required/>
        <input type='checkbox' name='checkbox2' value='checkbox2' required />
        <select required>
            <option value='option1'>option one</option>
            <option value='option2' selected='selected'>option two</option>
        </select>
            <button type="submit">submit</button>
    </form>
<script>
var data={};
$('#myForm').submit(function(event){
    // cancels the form submission if it's invalid
    event.preventDefault();
var inputs = $('#myForm').find(':checked,:selected,:text,textarea').filter(function() {
    return $.trim( this.value ) != '';
});
var formField = inputs.map(function(){
    return this.value;
}).get();

$.each(formField, function( index, value ) {
    data['credentialFields['+index+'].value']=value;
});$.ajax({ type : "POST",
        url : "restUrl",
        data : data
          });    

});


</script>

How to validate and submit N number of input fields with various Type to Rest Service?

1 Answers