Onchange select input remove error message

Dear Paul,
So in that case I must rename my individual drop down box but then I will have problem on my php site on reading the values sent via the post method. With now I just send and easily wrap it into an array and can read each row smoothly. What is your best suggestion?

Use explicit array indexes.

Dear Paul,
I dont understand actually now itself when I add row is different names e.g. prot.find(‘[name^=“locationFrom”]’).attr(‘name’, ‘locationFrom[’ + id + ‘]’);. How will the expilicit index to be implemented?

You should be able to use the unique field name to add new rules that apply to them.

Dear Paul,
OK I got your idea. Below is what I have tried to do in the function where I add the row itself below first I capture the dropdown name and try to assign the rule of required.I tried this $(“#dropLocationFromName”)").rules(‘add’, {required: true}); what could be my mistake here.

var dropLocationFromName = ‘locationFrom[’ + id + ‘]’;
//$(form).find(“dynamicRow”).append(prot);
$(“#dynamicRow”).find(‘tbody’).append(prot);
$(“#form1”).validate();
$(“#dropLocationFromName”).rules(‘add’, {required: true});

Could it be that $(“#dropLocationFromName”) is not the correct reference to the element?

Dear Paul,
Can you correct me here on how to get the correct reference? Am I on the right path itself or totally wrong there?

It seems that you are on the right path. What is the identifier added select field?

Dear Paul,
I am not sure with the indentifier I guess this is what you are asking var dropLocationFromName = ‘locationFrom[’ + id + ‘]’;. Thus the indentifier should be the id to make it unique each row.

Then it seems that $(“#dropLocationFromName”) should be that instead, which might be achieved with:

$(‘#’ + dropLocationFromName)

Dear Paul,
Even I have change like your advice I still get this error

element is undefined
var settings = $.data(element.form, ‘validator’).settings;

The work we’re doing here is similar to gardening. There is no one-stop-shop solution. Instead, we gradually work our way towards a solution, working through things bit by bit, issue by issue at a time.

The error message that you got means that the validator cannot seem to find the field that you want to add. Why not?

Does the new select field have the identifer that we expect it to have? Check and find out.

Dear Paul,
Sorry I am kind of lost. I woud expect that after this line $(“#dynamicRow”).find(‘tbody’).append(prot); the field should be in. How to check beside I am able to see it on the screen. Any idea how to other check?

That depends on the web developer tools that you have available.
Are you using Google Chrome, Firefox with Firebug, Internet Explorer (which version?), or something else?

Dear Paul,
I got Internet Explorer and also Firefox with firebug. What and how should I do the testing. Thank you.

With Firefox (and Google Chrome) you can right-click on the element and select Inspect Element

With Internet Explorer it’s not quite as easy. You press F12 for the developer tools, and in the HTML section you can drill down through the DOM tree to the appropriate element.

Dear Paul,
Ok exactly at the element I got this from the inspect element. So I notice missing the id=“locationFrom”? Am I right?

<td>
<div id=“parentDivLocationFrom”>
<select id=“locationFrom” class=“required error” name=“locationFrom[1]”>
<div id=“labelLocationFromError”></div>
</div>
</td>

That’s right.

Dear Paul,
I got it done. But I got one problem now each time a row is added the error message appear before the use can even pick any select value how to avoid if the user might feel annoyed. Thank you.

Dear Paul,
There is problem on IE the same error still appears. Even in Firefox the error is there but the Validation Message keep appearing too.