Validating textbox when it was shown using jQuery form rules

Question

I have a form which generates textbox when the user selects "others" in dropdown..

Dynamic textbox generation was done and I can able to get the value of "others" textbox.

But my Problem is

1) I want to validate the others textbox when it was shown..

How to do the validation any Suggesstions please..

<form name="f2" id="f2" method="post" action="" enctype="multipart/form-data">
    Type:
    <select name="type"  id="type" onchange='CheckColors(this.value);'> 
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="others">others</option>
    </select>
    <input type="text" name="others" id="others" style='display:none;'/>
    <input type="submit" name="submit"/>
</form>

//Here is the script to validate the form..I want to validate the the other textbox when only it appears..How to do that?

<script type = "text/javascript">
$(document).ready(function () {
    $("#f2").validate({
        debug: false,
        rules: {
            type: {
                required: true
            },
            others: {
                required: true
            },
            messages: {
                //messages for required
            }
        });
    }); 
</script>

I tried the above process but it always shows the required filed two times side by side.

how you are creating dynamic textbox ?

Amit Soni
– Amit Soni

2013-11-29 10:52:01 +00:00
Commented Nov 29, 2013 at 10:52 — Amit Soni
– Amit Soni, Commented Nov 29, 2013 at 10:52

Shiladitya · Accepted Answer · 2017-10-30 13:53:13Z

3

Try with this

$(document).ready(function () {
  $("#f2").validate({
    debug: false,
    rules: {
      type: {
        required: true
      },
      messages: {
        //messages for required
      }
    }
  });
});  

function CheckColors(value) {
  if(value=='others') {
    $('#others').show().attr('required','required');
  } else {
    $('#others').hide().removeAttr('required');
  }
}

Remove this line from validate function,then the validation works fine

others: {
   required: true
}

DEMO

edited Oct 30, 2017 at 13:53

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Nov 29, 2013 at 11:01

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validating textbox when it was shown using jQuery form rules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related