Add/remove validation rules Dynamically

Question

I need to dynamically add validation rules to a text box when the user clicks on the checkbox in that row and remove it when the user unchecks it. This is what I did, and it works fine, but I'm not sure if it is the right way to do it. Here's my html code:

<tbody>
 <c:forEach items="${list}" var="item">
    <tr>
      <td align="center">
         <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" />
      </td>
      <td align="left"><c:out value="${item.numberPlate}"/></td>
      <td align="left"><c:out value="${item.driver.fullName}"/></td>
      <td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" /></td>
     </tr>
  </c:forEach>                       
</tbody>

and my jquery:

-----EDITED----

Now I'm using add/removeClass and it also works fine,but isn't there a quicker way of doing this? I mean , one way to avoid writing so many 'add/removeClass' instructions? and finally how could I indicate "min:100" or " minlength:6" with addClass?

$("input[name=selectItems]").change(function() {
    if (this.checked)
       {  
            $(this).closest("tr").find("input[name^=mileage]").addClass('required');
            $(this).closest("tr").find("input[name^=mileage]").addClass('number');
       }
     else
       {
            $(this).closest("tr").find("input[name^=mileage]").removeClass("required")
            $(this).closest("tr").find("input[name^=mileage]").removeClass('number');

       }
 });

alt text

any suggestion is welcome and... I almost forgot, Merry Xmas!

Keep in mind that client-side (javascript) validations are easily hacked. Make sure to implement server-side validations, then play with jQ stuff. — Eric Fortis
– Eric Fortis, Commented Dec 25, 2010 at 18:50

Chandu · Accepted Answer · 2010-12-25 21:59:26Z

2

One small improvement would be to use addClass and removeClass instead of assigning class values using attr so that you would not remove any classes already assigned to the input fields that don't deal with validation (i.e. classes assigned to style the fields)

Edit: : (Updated the code below as per your comments)

$("input[name=selectItems]").change(function() {
        var me = $(this);
        var scoper = me.parent().parent();
        var otherInputs = $("input[name^=mileage]", scoper);
    if (this.checked)
       {  
            otherInputs.addClass('required number');
            otherInputs.attr('maxlength', '6');
       }
     else
       {
            otherInputs.removeClass("required number");
       }
 });

edited Dec 25, 2010 at 21:59

answered Dec 25, 2010 at 18:42

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

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

4 Comments

eddy Over a year ago

I made what you told me and now I'm using add/removeClass , but I still have some doubts, please check the comment below the ----Edited--- in my question

eddy Over a year ago

thanks a million now the function looks much better, but please tell me how could I indicate "min:100" or " minlength:6" with addClass? this is the last question , I promise :$

Chandu Over a year ago

If you want to apply the restriction of size you can use maxLength attribute, for minimum value you have to tweak the validation. I am not sure you can achieve either of them using addClass

eddy Over a year ago

@Cybernate- Could you please, give me a hand over here stackoverflow.com/questions/4532009/…

Collectives™ on Stack Overflow

Add/remove validation rules Dynamically

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related