lundi 20 février 2017

Jquery form validation where array of input text need to be checked based on array of input checkbox

I have a form, and I would like to share the screenshot of the form to explain the issue better:- enter image description here

In the form, there are five smileys each having one checkbox and one input text. The ides is, if you select a particular smiley (by checking the checkbox), then the image location gets saved in the database along with the text you put in the textbox.

The smiley (along with the checkbox and textbox are listed in the html like this:-

<div id="smiley_container">
    <?php for($i=1;$i<=5;$i++) 
          { ?>
                <div class="form-group col-sm-12">
                    <label class="col-sm-2">Smiley <?php echo $i;?><span class="required_span">*</span>
                    </label>
                    <div class="col-sm-1">
                        <img src="<?php echo base_url();?>uploads/smiley/<?php echo $i;?>.png" style="width:40px;"/>
                    </div>
                    <div class="col-sm-1">
                        <input type="checkbox" name="smileycheck[]" id="smileycheck_<?php echo $i;?>" value="<?php echo $i;?>" />
                    </div>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="Set name for the smiley" name="smileyname[]" id="smileyname_<?php echo $i;?>"  />
                    </div>
             </div>
    <?php } ?>
</div>

Now I had a validation code like this-

$(function() {
    // Initialize form validation on the registration form.
    // It has the name attribute "registration"
    $("form[name='myQstnForm']").validate({
        // Specify validation rules
        rules: {
            // The key name on the left side is the name attribute
            // of an input field. Validation rules are defined
            // on the right side
            desc: "required",         
            type: "required",
            "option[]": "required",
            "smileyname[]": "required",
        },
        // Specify validation error messages
        messages: {
            desc: "Please provide question text",         
            type: "Please select question type",
            "option[]": "Please provide data",
            "smileyname[]": "Please provide data",
        },
        // Make sure the form is submitted to the destination defined
        // in the "action" attribute of the form when valid
        submitHandler: function(form) {
            form.submit();
        }
    });
});

Nowever, the above jquery code wants all the option texts to be filled. Actually, only those texts should be needed to fill whose corressponding checkbox has been checked.

How can I solve this problem?




Aucun commentaire:

Enregistrer un commentaire