简体   繁体   中英

How to do client side validations if some text boxes are generated dynamically

I'm working on a form which has this add button, if the button is clicked a text box is foing to generate and i have a minus button to cancel it.

my problem is i have to work on client side validations in this page

the code i used to generate new text boxes is

i = 0;
var counter = 2;

$("#addButton").click(function () {
    optionCount++;
i++;


var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv'+i);
   newTextBoxDiv.after().html('<label>Option : </label>' +
      '<input type="text" class="add_input" name="textbox'  + counter + '"   id="textbox' + counter + '" > <input type="button" class="rem_img minusclick" id="removeButton'+i+'"  alt="Remove"  title="Remove" onclick="RemoveButton(\''+i+'\',\''+counter+'\')">');

 newTextBoxDiv.appendTo("#TextBoxesGroup");
    optionIds.push(counter);
    counter++;

The validation is to be done after clicking the submit button. and i need to display an error message beside each empty text box(that is generated by clicking add button)

im confused where to start and what exactly i have to do for this Please help..

I add onchange method textbox;

i = 0;
var counter = 2;

$("#addButton").click(function () {
    optionCount++;
i++;


var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv'+i);
   newTextBoxDiv.after().html('<label>Option : </label>' +
      '<input type="text" onchange="Validate(this,\"ValueControl\")" class="add_input" name="textbox'  + counter + '"   id="textbox' + counter + '" > <input type="button" class="rem_img minusclick" id="removeButton'+i+'"  alt="Remove"  title="Remove" onclick="RemoveButton(\''+i+'\',\''+counter+'\')">');

 newTextBoxDiv.appendTo("#TextBoxesGroup");
    optionIds.push(counter);
    counter++;

Create This function;

 function Validate(elementObject,validType){
            if(validType=="ValueControl"){
                if($(elementObject).val()==''){
                    $(elementObject).css("background-color","#000000");
                }
            }
        }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM