Onchange select input remove error message

Dear All,
Here is my link http://183.78.169.54/v3/addRoute.php. First you need to a simple route name and then press the submit button and do not select the select input values. Then you will see red message appear below it. Now my only problem when I have selected meaning on change I want the error message to disappear. I am stuck here any help please.

I don’t know exactly what you mean I guess.

I first entered a test word into the Route Name field, then hit Submit.
A couple alert()s
Got a bunch of red "must not be empty"s

Then I selected from the 4 drop-downs and hit Submit again.
A couple alert()s
After a pause, the error messages went away.

Are you just not waiting long enough?

Dear Mitteague,
Here is the problem “Then I selected from the 4 drop-downs and hit Submit again.A couple alert()sAfter a pause, the error messages went away.” What happens is that I do not want to submit again but just by selecting any of the drop down value I want the relevant error message to disappear even before the second time the submit button is hit. Thank you.

Ah, now I understand.

The code validates inputs onsubmit OK (tests all 4 in a “batch”?)

It sounds like for the onchange to work, all four would need to change at the same time - highly unlikely :wink:

I have to go offline for the night soon. But if no one else helps I’ll take a closer look when I get a chance tomorrow.

Dear Mitteague,
You got my problem right. I want to control on single basis meaning any one change then the relevant message should go off is that possible? I am stuck here.

It looks like jQuery’s validate already automatically checks dropdown boxes as a part of the onchange event.

See the radio/checkbox/select demo here.

Dear Paul,
To be frank I manage to build read the dynamic validation with the div method. I am just lost now is that how to include the onchange for my dynamic row. So I dont know how the jquery can fit into my codes as below.

$(“input[type=‘text’]”).each(function(){
$(this).change(function(){
$(this).siblings(‘div’).text(‘’);
});
});

My question is, your page loads the jQuery validator, so why aren’t you using that instead? It already handles the onchange validation that you seem to require.

Dear Paul,
I saw the example with this line only “<select id=“jungle” name=“jungle” title=“Please select something!” validate=“required:true”>”. Do you think I should change my select input with this addition validate=“required:true” will be enough. Just to let you know each of the row of drop down is dynamic. Thank you.

From the looks of things, you are loading the jQuery validate library, but you have not told it to do anything. Instead, you seem to have rolled out a completely separate type of hand-written validation routine instead.

Dear Paul,
You are exactly correct. The problem why I did this was I am sorry was totally lost because ealier I put the class=required nothing work so I had no choice work all by myself. So now I have remove all the handwritten stuff and for a test just put for the first drop down box <select class=‘required’ id=‘locationFrom’ name=‘locationFrom’ >.Can you give me hint how to go about from here?

Sure thing. Have a look at the example on the jQuery [url='http://docs.jquery.com/Plugins/validation"]validate documentation page.

Dear Paul,
Ok I have read and put the first step $(“#form1”).validate();. What I read is that it will automatically validate the form right but not in my case. So what do you think I must do next add more rules is it?

Starting with the HTML basics, the route name doesn’t have a required class, so no error message appears for that.

Also, the default select field has a value of “0” which is considered as a valid value. Make the default option an empty string and that select will be considered to no pass validation, resulting in a correct validation error if it’s left as that.

Dear Paul,
Once I use the class=‘required’ then how am I going to use my own class which I have set via the .css file. I would like to ask you more about the validate function actually when it will be called only when I submit the form is it and how is this control. Secondly I have done the changes your suggested but if I add new row it does not get validated for the first drop down.

Adding a new row means that you have introduced a change to the form elements, so you will need to either reinitialize the validate function, or add new rules to the validation.

Dear Paul,
Will it suffice if I add the form.validate() upon each of the new row entry? I have tried that but no changes. So how am I going to apply my custom class to my form elements ?

Yes, that should be doable.

Dear Paul,
I have done that like this but still not effect. I would like to a bit in depth of this invalidate I thought upon submit it should validate all rows right then why need to reinitiliaze.

$(“table.dynatable button.add”).click(function() {
var form = this.form;
id++;

            // Get a new row based on the prototype row
            //var prot = master.find(".prototype").clone();
            var prot = $(form).data('prototype').clone();
            prot.find('[name^="id"]').attr("value", id);
            prot.find('[name^="locationFrom"]').attr('name', 'locationFrom[' + id + ']');
            prot.find('[name^="locationFrom"]').attr('value', '');
            prot.find('[name^="eventFrom"]').attr('name', 'eventFrom[' + id + ']');
            prot.find('[name^="eventFrom"]').attr('value', '');
            prot.find('[name^="locationTo"]').attr('name', 'locationTo[' + id + ']');
            prot.find('[name^="locationTo"]').attr('value', '');
            prot.find('[name^="eventTo"]').attr('name', 'eventTo[' + id + ']');
            prot.find('[name^="eventTo"]').attr('value', '');


            //$(form).find("dynamicRow").append(prot);
            $("#dynamicRow").find('tbody').append(prot);
            $("#form1").validate();
            return false;
        });

I think that the validate plugin ignores any fields that have the same identical name. That may help.