Dynamic validation in jquery

Question

$(document).ready(function(){
 $('a[rel=addhint]').click(function(){
  var html='<div><label>Hint</label>';
  html+='<span class="input"><input type="text" size="30" class="text" name="hint"/><a href="#" rel="delhint">delete</a></span><br class="clear" /></div>';
  $('div#hintTextContainer').append(html);
  bindDelHintAll();
  return false;
 });

I want when a new text area include vadition of required field and max length will also apply on it.

Answer 1

Not sure if you are familiar with the jQuery validation plugin http://docs.jquery.com/Plugins/Validation

It is a very robust library, all sorts of goodies. It may be overkill for the example you have put forth. It does not have a lot about dynamically added content but you may be able to tweak the framework to do what you want.

Aside from that. There is also a really great textarea maxlength plugin, so you won't even have to validate it! http://sigswitch.com/2010/04/updated-textarea-maxlength-with-jquery-plugin/

As far as making sure the user has content in the text area, just check

jQuery('textarea.newlyAdded').val().lenght > 0  

when submitting.

Answer 2

From the looks of your code you are dynamically building a form in the duration of a page view. In order to on-the-fly implement a form validation system you would need the function which creates the input to have a way to plug into the form validation system.

One solution would be to add an attribute to the field which would be read by the validation function.

<form name="testform" id="testform" method="post">
  <input type="text" name="hint" validation-params='{ "req" : true, "max-length" : 10 }'>
  <input type="submit">
</form>

<script>
  $(function() {
    $("#testform").submit(function() {
      var self = $(this);
      self.find("input").each(function() {
        var validation = jQuery.parseJSON($(this).attr("validation-params"));
        if (validation.req) { alert("required"); }
      }); 
      return false;
    });
  });
</script>

If you look at the example above, you'll see that it creates a form. In the submit handler it takes the form and loops through every input on the form and grabs the validation-params attribute and converts the string attribute to a JSON object. It then checks a specific field, you could easily add your own validation to it right there.