Onchange select input remove error message.

[newtomysql]

Dear Paul,
As of my knowledge in javascript I feel it can be done on submit which is easier rite. I know in javascript you can run through a for loop and check for each row and check the first row and last row. I know how to do it in javascript but jquery is where I am stuck as I would like to learn it and that is where I am stuck.

[paul_wilkins]

Dear Paul,
As of my knowledge in javascript I feel it can be done on submit which is easier rite. I know in javascript you can run through a for loop and check for each row and check the first row and last row. I know how to do it in javascript but jquery is where I am stuck as I would like to learn it and that is where I am stuck.

If you do it on submit, then any rows that are added or removed won't have the validation rules updated, which is what drives those error messages that happen whenever fields change.

[newtomysql]

Dear Paul,
Correct if I am wrong so meaning that jquery does not work like
Javascript in this scenario is it. Because I agree with to manage the rows
Is difficult in this case.

[paul_wilkins]

Correct if I am wrong so meaning that jquery does not work like Javascript in this scenario is it.

What is it about them that you would expect to behave any differently?

[newtomysql]

Dear Paul,
I dont hope they behave differently. I think wouldnt it be good if could do it upon onSubmit itself using jquery? The reason is because I feel using the row level validation becomes very complex especially when you remove and add rows? So what is your best suggestion as you are the guru of java script.

[paul_wilkins]

Dear Paul,
I dont hope they behave differently. I think wouldnt it be good if could do it upon onSubmit itself using jquery? The reason is because I feel using the row level validation becomes very complex especially when you remove and add rows? So what is your best suggestion as you are the guru of java script.

When someone submits, they ae mentally ready to finish up on things, so that's a bad time to drag them back due to something not being right.

It's far better to let them know beforehand about parts that need to be fixed.

So, update the form rules whenever conditions within the form change.

[newtomysql]

Dear Paul,
Great totally agree when submit should just insert into db and not going back and adjusting things. Ok so have you seen me rules below does is make sense. I am calling this assignRules(form); function to do it.

$("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('id', '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', '');

//var dropLocationFromName = 'locationFrom[' + id + ']';
//alert("dropLocationFromName : "+dropLocationFromName);
//$(form).find("dynamicRow").append(prot);
$("#dynamicRow").find('tbody').append(prot);
//$("#form1").validate();
//$('#' + dropLocationFromName).rules('add', {required: true});
assignRules(form);
return false;
});


function assignRules(form)
{

$('td:nth-child(2) select',form).each(function ()
{
$(this).rules('add', {required:

function(element) {
return $(element).val()!=$("#locationTo").val();

);

}
}

[paul_wilkins]

Ok so have you seen me rules below does is make sense. I am calling this assignRules(form); function to do it.

The assignRules function takes every locationFrom select field, and adds a rule that is should have a different value from one specific locationTo field.

One problem that I see there is that each locationFrom field is being compared with only one locationTo field, as identified by its unique identifier. Whereas instead you want to be comparing with the locationFrom field that's on the same row as the locationTo field, right?

No, make that two problems, because the first and last row must have the same location, whereas the ones in the middle must have different values, right?

No, make that three problems, because when a change to the locationForm field of a row occurs, you also need a validation rule for that locationFrom field, so that it checks the other fields that relate to it.

Hang on, make that four problems, because the locationTo field should also check the previous row's locationFrom field as well as the current row's locationFrom, shouldn't it, and likewise for the locationFrom row, it should also check the next locationTo row as well as the current row's locationTo, right?

[newtomysql]

Dear Paul,
Wow this looks quite complex right. Can we go step by step maybe you can guide on the first step to proceed next? Thank you.

[paul_wilkins]

Dear Paul,
Wow this looks quite complex right. Can we go step by step maybe you can guide on the first step to proceed next? Thank you.

Let's first try to understand what is required.

For the row that contains the locationFrom field, is its validation rule always going to be the same, or does it differ based on the the locationTo field that's on the same row?
And further, does the comparison between the from and to fields differ depending on whether they are the first or last row, or one of the rows inbetween?

[newtomysql]

Dear Paul,
Ok is like this for the first row and last row both locationTo and locationFrom will be the same. Then the middle row will follow this rule the locationFrom of current row will be same with the locationTo of the previous row thats all. I guess I have made it simpler and easier.

[paul_wilkins]

Dear Paul,
Ok is like this for the first row and last row both locationTo and locationFrom will be the same. Then the middle row will follow this rule the locationFrom of current row will be same with the locationTo of the previous row thats all. I guess I have made it simpler and easier.

So, when dealing with all of the rows, you can use the :first and :last selectors.
And you can use the :not selector to remove the first and last rows from the selection, which means that you're then dealing with all the ones in the middle.

So, you could use something like this:

var $rows = $('... tr');
$(':first, :last', $rows).each(function () {
    // setup rule so that from must equal to
});
$(':not(:first):not(:last)', $rows).each(function () {
    // setup rule so that from must not equal to
});

[newtomysql]

Dear Paul,
I tried some basic things like this. The problem the alert('Middle Row') keep poping up. Any idea what is wrong here?

var $rows = $('table.dynatable tbody tr');
$(':first, :last', $rows).each(function ()
{
alert("First row and last row");
// setup rule so that from must equal to
});

$(':not(:first):not(:last)', $rows).each(function ()
{
alert("Middle row");
// setup rule so that from must not equal to

});

[paul_wilkins]

Looks like we'll have to come back a step, and use $tbody instead of $rows

That way you can get:
$('tr:first, tr:last', $tbody)

and
$('tr:not(:first):not(:last)', $tbody)

[newtomysql]

Dear Paul,
I this how you want it to be changed.

var $tbody = $('table.dynatable tbody');
$('tr:first, tr:last', $tbody).each(function ()
{
alert("First row and last row");
// setup rule so that from must equal to
});

$('tr:notfirst):notlast)', $tbody).each(function ()
{
alert("Middle row");
// setup rule so that from must not equal to

});

[paul_wilkins]

I this how you want it to be changed.

Yes, that seems to do the job.

Another way of doing the same thing is like this:

$('table.dynatable tbody tr').each(function (index) {
    if (index > 0 && $(this).next().length > 0) {
        alert("Middle row");
        // setup rule so that from must not equal to
    } else {
        alert("First row or last row");
        // setup rule so that from must equal to
    }
});

[newtomysql]

Dear Paul,
I have tried to add further details but I got stuck can you check what I did below is correct?

$('table.dynatable tbody tr').each(function (index)
{
if (index > 0 && $(this).next().length > 0)
{
alert("Middle row");
// setup rule so that from must not equal to
rules: {
$this:
{
required: function(element) {
return $this.nth-child(2).val()!=$this.nth-child(4).val();
}
}
}
else
{
alert("First row or last row");
// setup rule so that from must equal to
rules: {
$this:
{
required: function(element) {
return $this.nth-child(2).val()==$this.nth-child(4).val();
}
}
}
);

[paul_wilkins]

The name of the form field is different each time, so you'll have to apply some smarts to what is happening.

How it can be done is to create an object called rule, to which you add the property you require on there. After that you can then add that combined object to the validation rules.

var rule = {};
rule[this.name] = ...
$(this).rules('add', rule);

[newtomysql]

Dear Paul,
I have added further will these be fine.

$('table.dynatable tbody tr').each(function (index)
{
if (index > 0 && $(this).next().length > 0)
{
alert("Middle row");
var rule = {};
rule[this.name] =
{
required: function(element) {
return $this.nth-child(2).val()!=$this.nth-child(4).val();
}

$(this).rules('add', rule);


// setup rule so that from must not equal to
}
else
{
alert("First row or last row");
// setup rule so that from must equal to
var rule = {};
rule[this.name] =
{
required: function(element) {
return $this.nth-child(2).val()==$this.nth-child(4).val();
}

$(this).rules('add', rule);
}
}
);

[paul_wilkins]

I have added further will these be fine.

I am just guiding you through the issues here. It's up to you to put them together in your own test page.

[newtomysql]

Dear Paul,
I have added everything into my test page. My test page is here http://183.78.169.54/v3/addRoute.php. I do not know is showing me some error related to the jquery file. It say like this "a is undefined
[Break On This Error] (function(a,b){function cg(a){return d...a:a+"px")}}),a.jQuery=a.$=d})(window);"

[paul_wilkins]

Dear Paul,
I have added everything into my test page. My test page is here http://183.78.169.54/v3/addRoute.php. I do not know is showing me some error related to the jquery file. It say like this "a is undefined
[Break On This Error] (function(a,b){function cg(a){return d...a:a+"px")}}),a.jQuery=a.$=d})(window);"

In the function for each table row, once you decided whether you're dealing with a middle row or not, you need to handle the form fields within that row separately. That can be easier to manage when you use a function to help encapsulate what you need to think about.

function matchingFromAndTo(row) {
    ...
}
function differentFromAndTo(row) {
    ...
}

That way you can call those functions from within the each row loop, and more easily reduce the complexities of what you need to handle.

if (index > 0 && $(this).next().length > 0) {
    differentFromAndTo(this);
} else {
    matchingFromAndTo(this);
}

Now it much more clearer that more work is needed inside those functions, to handle the fields that are on that particular row that's passed to the function.

[newtomysql]

Dear Paul,
I have done accordingly broke into its resepective functions. Can you see if this is how it suppose to be?

[paul_wilkins]

Dear Paul,
I have done accordingly broke into its resepective functions. Can you see if this is how it suppose to be?

Focus now one each of those functions. For example, the function that take a row and adds rules for the field being the same.

The function is supposed to receive a row, but you have invalidly renamed the function parameter from row to this.

[newtomysql]

Dear Paul,
IS this correct now?I am not sure must I put $ or not in this case?

function matchingFromAndTo(row)
{
var rule = {};
rule[this.name] =
{
required: function(element) {
return row.nth-child(2).val()==row.nth-child(4).val();
}
}
row.rules('add', rule);

}