Question

Im adding dynamically textboxes to my form using jquery like this:

$(document).ready(function(){
    var i = 1;
    var j = 1;

    $('#add_q').click(function() {
        $('<div class="d' + i + '" class="fielddiv"><h2>Domanda(<a href="javascript:;" class="remove_question" todel="d' + i + '">x</a>)</h2><div class="row"><div class="span7"><input type="text" class="field input-xxlarge" name="questions[]" /></div> <div class="span3"><label class="checkbox"> <input type="checkbox" name="rm' + i + '" value="1"> Risposte multiple?</label></div></div><div id="answers_' + i + '" ></div><hr> <a href="javascript:;" class="add_a" qid="answers_' + i + '">Aggiungi risposta</a></div>').fadeIn('slow').appendTo('.inputs');
        i++;
    });

    $(document).on('click', '.add_a', function(event) {
        $('<div class="a' + j + ' dashForm"><input type="text" class="field input-xlarge" placeholder="risposta" name="a_' + $(this).attr('qid') + '[]" /></div>').fadeIn('slow').appendTo('#'+$(this).attr('qid'));
        j++;
    });

    $(document).on('click', '.remove_question', function(event) {
        $('.' + $(this).attr('todel')).remove();
    });


});

Working example here.

I need to check if at least one of the textboxes is empty before posting the form, mainly because when i check it later using php if there is an error, the user has to come back to the form and they have to start all over again (the fields disappear when getting back because they where generated dynamically). Is there a way to check this user side on jquery?

Answer 1

Sure thing.

Just use $("input[type=text]").each() and check the value for each text for empty, once you have a match, submit the form.

Assign an id to the form, like this:

<form id="myForm" method="POST">

Then, in jQuery, use

$("#myForm").submit(function(e) {
   // Check textboxes

   if(!ok) {
       // Stop submit
       e.preventDefault();
   }
});

Here is a Sample