Jquery required false is still trying to validate

JavaScript
1

Dear All,
I have a page here http://183.78.169.53/scv/addRoute3.php. What is does it check if either of the second/third dropdown list is not selected then minimal the third dropdown list is required. I have function like this. What it does when there is change in the second column dropdown list > 0 then I want to make the third column dropdown list to required false but when I submit it still shows me the error message “This field is required”. Any help please?

function handleDwellTimeHourUpdate(index)
					 {
						
						
						  	//alert("First or last row");
						  	var hourValue = $('select[name^="dwellTimeHour"]', $(this).closest('tr'));
						    //alert("Hour value :"+hourValue.val());
						    var minuteValue = $('select[name^="dwellTimeMinute"]', $(this).closest('tr'));
						    if(hourValue.val()>0)
						    {
						    //alert("TEST");
						    //minuteValue.val(2);
						     minuteValue.rules('add', {required: false});
						    }
						    else
						    {
						    	minuteValue.rules('add', {required: true});
						    }
					 }
2

You can’t remove a rule by adding the opposite of it. By adding another rule you end up with another rule that the validator is trying to match.
Instead, you need to remove the rule, using the (‘remove’, {required: true}) instead of (‘add’, {required: false})

See rules( “remove”, [rules] ) for the documentation about removing validation rules.

3

Dear Paul,
I get error after putting the remove command. The error says object does not support this property or method? I put as below

if(hourValue.val()>0)
{
//alert(“TEST”);
//minuteValue.val(2);
minuteValue.rules(‘remove’, {required: true});
}
else
{
minuteValue.rules(‘add’, {required: true});
}

4

The options part doesn’t have to be specified, so it could just be this to remove all the rules for that element:

minuteValue.rules(‘remove’);

5

Dear Paul,
Ok that works another thing I would like to ask you is when I select the dropdown list value of column >0 can the it immediately remove the message “This field is required” on the third column rather than the user have to press submit button then only it gets removed?

6

I’m not sure if it can be automatically be done by the validator, but you can edit your script to look for that element with a class of “error” and remove the element.

7

Dear Paul,
I saw these lines for the errors. <label class=“error” for=“dwellTimeMinute2” generated=“true” style=“display: none;”>This field is required.</label>. I plan to manipulate around with the style=“display:none”. The problem is the labels do not have an id just have for= only ? How can manipulate that? Thank you.

8

You shouldn’t have you. The label is next after the dropdown list, so you can use some simple DOM traversing from that dropdown list to check if the error message exists, and if it does to then remove it.

9

You shouldn’t have to. The label is next after the dropdown list, so you can use some simple DOM traversing from that dropdown list to check if the error message exists, and if it does to then remove it.

10

Dear Paul,
I did someting like this.What is your comment on it?

if(hourValue.val()>0)
{
//alert(“TEST”);
//minuteValue.val(2);
minuteValue.rules(‘remove’);
$(this).closest(“tr”).find(‘label’).remove();
}
else
{
minuteValue.rules(‘add’, {required: true});
}

11

If it works then well and good. I would only modify ‘label’ to be ‘label.error’ both to ensure that it find the right one, and so that later on when you come back to this code, you have a better idea about what it;s supposed to do.

12

Dear Paul,
Thank you I have added the error thing. I have one more problem here. I have checked $(this).closest(“tr”).find(‘[name^=“dwellTimeHour”]’).val())==0 that even when the dwellTimeHour is not equal to 0 it still pass through this if statement I even tried to put the Number yet same results.

function setupMultipleRowValidation(form) {

           //alert("LEngth : "+$('table.dynatable tbody tr', form).length);
           var dth=0;
           $('select[name^="dwellTimeMinute"]', form).each(function ()
        	 {
        	 	
        	 	alert("Hour Value is :"+$(this).closest("tr").find('[name^="dwellTimeHour"]').val()+"  "+"DTH : "+dth);
        	 	if(Number($(this).closest("tr").find('[name^="dwellTimeHour"]').val())==0);
        	 	{
        	 	 //$(this).closest("tr").find('[name^="dwellTimeMinute"]').val(dth);
        	 	 //alert("ZEO VALUE");
        	 	 alert("DTH :"+dth);
        	 	 $(this).closest("tr").find('[name^="dwellTimeMinute"]').rules('add', {required: true});
						
        	 	}
        	 	            	 	dth++;
        	 }
        	 );
					
        };
13

If the field is empty the value will be an empty string, “”, and according to the type-converting comparison operator, “” == 0 since both sides are falsy in value.
You should always be using the strict equals instead, with ===, so that you check if the value is strictly equal to “0”

14

Dear Paul,
Is ok I did a work using the if and else that worked ready. But I will try the === method too. Thank you.