Jquery why class must be made empty?

[newtomysql]

Dear Paul,
Ok now I am getting it slowly sorry new student. How about this code can you disect for me

var suffix = /\[.*\]/.exec(field),
name = 'name' + suffix,
col3 = 'col3' + suffix,
col4 = 'col4' + suffix;
return {
required: filledFields([name, col3, col4]),
number: (field === col3)
}; and
var selectors = [];
$(array).each(function (i, name) {
selectors.push('[name="' + name + '"]:filled');
});
return selectors.join(', ');

Thank you so much.

[paul_wilkins]

Dear Paul,
Ok now I am getting it slowly sorry new student. How about this code can you disect for me
Thank you so much.

Sure thing, although this may be going over the same ground that was covered in the larger post earlier.

The function uses the name of the name field as a template to create the validation rules for the entire row.

First, the function finds the suffix, which for "name[2]" would be "[2]"
It then creates "name[2]", "col3[2]" and "col4[2]" so that we can easily refer to them later on.

var suffix = /\[.*\]/.exec(field),
name = 'name' + suffix,
col3 = 'col3' + suffix,
col4 = 'col4' + suffix;

When validating a field called "username", the way you would set up validation for it would be something like this:

var rules = {
    username: required
};
form.validate({rules});

If the required username is only required when the password has been filled in, you could use required with a dependency expression for the rule:

var rules = {
    username: {
        required: '[name="password"]:filled'
    }
};

So the object that defines the rules for the username would be:

{
    required: '[name="password"]:filled'
}

You can use :filled in the selector because the validator adds some custom selectors, which are, :filled :blank and :unchecked

Returning back to your form, the validation rule for just one of the validation tests could be:

{
    required: '[name="col4[2]"]:filled'
}

That's number 4 in this list of rules we need for each row.

1. Name is required if col3 is filled
2. Name is required if col4 is filled
3. Col3 is required if Name is filled
4. Col3 is required if Col4 is filled
5. Col3 must be a number
6. Col4 is required if Name is filled
7. Col4 is required if Col3 is filled

Effectively, those seven rules declare that those three fields must be filled in if any of the others are filled in. They are allowed to be blank only if the other fields are also blank.

What this means for the name field, is that its required validation must check if two different fields are filled in.

{
    required: '[name="col3[2]"]:filled, [name="col4[2]"]:filled'
}

But we don't know which field we're creating the rule for. Fortunately, it's okay for a field to validate itself. We can declare that the name field is required if it's filled too, which allows us to use the one rule for all three columns.

Using the variables that contain the fields name, we have:

{
    required: '[name="' + name + '"]:filled, [name="' + col3 + '"]:filled, [name="' + col4 + '"]:filled'
}

If in the future the validation requirements change, an alternative is to set up an array which specifies which validation rules to use for which row. That kind of expansion is not yet required though.

To help simplify things though, a function is used that takes an array of names, and returns the comma separated string that you see above.

This code accepts an array such as [name, col3, col4] which then creates the selectors you see in the above code, and returns it ready to use.
There are even some comments in the filledFields function to act as a helpful reminder.

function filledFields(array) {
    // when given ['name', 'age'] this function will return the following string
    // '[name="name"]:filled, [name="age"]:filled'
    var selectors = [];
    $(array).each(function (i, name) {
        selectors.push('[name="' + name + '"]:filled');
    });
    return selectors.join(', ');
}

Finally we deal with the number requirement on the col3 field.

The validation allows number: true to say that a number is required,
and number: false to say that a number is not required.

We can get true or false for the number by checking that the field for which we're creating the rule, has the same name as the one for col3

number: (field === col3)

Putting that all together, we get the returned object of the function.

return {
    required: filledFields([name, col3, col4]),
    number: (field === col3)
};

which would result in something like this for one of the rows:

{
    required: '[name="name[2]"]:filled, [name="col3[2]"]:filled, [name="col4[2]"]:filled',
    number: true
}

[newtomysql]

Dear Paul,
Ok so in this case when I call createSingleRowRule(this.name) the this.name will be the name of the first field is it that is name[2] ? Then in that function we get out [2] right. Then next we called filledFields([name[2],col[3],col[4]). This part I am not so clear $(array).each(function (i, name) . Can you give me more details on this? Thank you.

[newtomysql]

Dear Paul,
I got another similar problem at this link http://183.78.169.54/v3/class.php. The problem here is that I need to build different class and their number range. For instance classA 0 to 10,classB 11 to 20,class 21 to 35 etc. I have managed to create 3 column one is class name then start range e.g for class A is 0 and end range e.g. for class A is 10. I know we can do it via the rules but I dont know how to set the rules where I check the range is ok and the next row start range must start after +1 to the previous end range.

[paul_wilkins]

Then next we called filledFields([name[2],col[3],col[4]). This part I am not so clear $(array).each(function (i, name) . Can you give me more details on this? Thank you.

The suffix is identical on all of them, they are strings, and there's a closing square bracket too.

filledFields(['name[2]','col3[2]','col4[2]'])

The array each method just loops through each of those strings in the array, and inside the function the array index is passed to the variable i, and the array item is passed to the variable name.

The index variable isn't used in this case, its just the name that we're interested in, so that we can wrap it with the appropriate form validation rule.

[paul_wilkins]

I know we can do it via the rules but I dont know how to set the rules where I check the range is ok and the next row start range must start after +1 to the previous end range.

The validator methods lists several different methods, among which are min, max and range

[newtomysql]

Dear Paul,
Correct me so the end results the selector variable will it be something like this '[name="name[2]"]:filled, [name="col3[2]"]:filled, [name="col4[2]"]:filled'. But why can not build this in the createSingleRowRule function itself why do we need separate function for that ya.

[paul_wilkins]

why can not build this in the createSingleRowRule function itself why do we need separate function for that ya.

At first it was:

required: '[name="' + name + "]:filled, [name="' + col3 + '"]:filled, [name="' + col4 + '"]:filled',

which looked somewhat messy. Encapsulating that behaviour within a function tends to make the code more readable and easier to understand.

required: filledFields([name, col3, col4]),

[newtomysql]

Dear Paul,
What is the line doing exactly. Why we dont apply it for the multiple role. Another thing what is it the debug:true means? Thank you.

var nameField = $('tr td input[name^="name"]', form); and $(form).validate({
/*rules: singleRowRules,*/
debug: true
});

[newtomysql]

Dear Paul,
I have started on my own to code the class.php at this link http://183.78.169.54/v3/class.php. The problem I have modified my previous codes and try to set the required for all and also number for the last 2 columns. I notice there is any error some where here $('td:notfirst) input', form).each(function () { and the error comes when I remove the setupSingleRowValidation function? I thought that is a separate function right?

[paul_wilkins]

Dear Paul,
I have started on my own to code the class.php at this link http://183.78.169.54/v3/class.php. The problem I have modified my previous codes and try to set the required for all and also number for the last 2 columns. I notice there is any error some where here $('td:notfirst) input', form).each(function () { and the error comes when I remove the setupSingleRowValidation function? I thought that is a separate function right?

The setupSingleRowValidation function is called form setupFormValidation, so you would need to change:

if ($('tbody tr', form).length > 1) {
    setupMultipleRowValidation(form);
} else {
    $(form).validate().resetForm();
    setupSingleRowValidation(form);
}

to just:

setupMultipleRowValidation(form);

The debug stuff you were asking about before allows you to prevent the form from submitting, to give you a change to see scripting errors and to debug issues. I must have been really tired to have left that in there.

[newtomysql]

Dear Paul,
So why the setupMultipleRowValidation dont have the debug stuff there any reason for it or it should be there? Thank you.

[paul_wilkins]

Dear Paul,
So why the setupMultipleRowValidation dont have the debug stuff there any reason for it or it should be there? Thank you.

It shouldn't be there. It was only there for development and testing purposes.
I have already removed it from the post where it was there, and you can remove it from your code too.

[newtomysql]

Dear Paul,
Can you visit this link now http://183.78.169.54/v3/class.php. If you notice the error is still there even though I just left as this

function setupFormValidation(form) {
setupMultipleRowValidation(form);

}

[paul_wilkins]

Dear Paul,
Can you visit this link now http://183.78.169.54/v3/class.php. If you notice the error is still there even though I just left as this

The error is:
TypeError: Cannot read property 'settings' of undefined

That happens when this rule method occurs:

$('td:not(:first) input', form).each(function () {
    $(this).rules('add', {required: true});
});

The error is the validator's way of telling you that you're trying to access a field that has not yet been set up for validation.
You need to run the validate() method on the form, before you can access the rules for a field in the form.

Previously it was the setupSingleRowValidation function that did that. Now you need to ensure that it occurs no matter what. So do it as the first statement of the setupFormValidation function.

That way the function will initialise the validation on the form, and then run setupMultipleRowValidation to provide the details.

[newtomysql]

Dear Paul,
I have put like this $(this.form).validate(); still got error. What must I put exactly? Actually when I say form validate means it will validate it immediately is it.

[paul_wilkins]

I have put like this $(this.form).validate(); still got error.

That's because you've put it in the wrong place. It should be put in the setupFormValidation function.

function setupFormValidation(form) {              
        $(form).validate();
        setupMultipleRowValidation(form);
}

Actually when I say form validate means it will validate it immediately is it.

The documentation page is a good place to get an answer to that. I just repeat what they have to say there. For example:

The validate() page says:

This method sets up event handlers for submit, focus, keyup, blur and click to trigger validation of the entire form or individual elements.

and there is also the valid() page which says:

Checks whether the selected form is valid or whether all selected elements are valid.

So the impression that I get is that validate() does not actually validate the form. It just sets up the form so that it can be validated later on.
If you want to actually validate the form, you would use the valid() method instead to trigger that process.

[newtomysql]

Dear Paul,
Ok that solve the problem. So now I have added this additional logic for my new problem. First I run a loop for each tr then in it for each td. Then for the first row and third column ( if(rowCount==1 && columnCount==3) ) I check the value. Now I am stuck here how to assign the rule where the first start value must be 0. Must I use the range method is it. Next in else if(rowCount>1 && columnCount==3) I will try to calculate the difference between the current start value and previous row end value if the difference is not 1 then I again want to raise a rule here. Can you help me how to assign the necessary rules. Thank you.

var previousEndValue=0;
if ($('tbody tr', form).length > 0)
{
//alert("TEST: ");
var rowCount =0;
$('tbody tr').each(function()
{
rowCount++;
var columnCount =0;
$(this).find('td').each(function()
{
columnCount++;
if(rowCount==1 && columnCount==3)
{
var firstStartValue = $(this).find('input[name^="start"]').val();
//alert("Testing:"+firstValue);
}
else if(rowCount==1 && columnCount==4)
{
previousEndValue = $(this).find('input[name^="end"]').val();
}
else if(rowCount>1 && columnCount==3)
{
var currentStartValue = $(this).find('input[name^="start"]').val();
var differenceInValue = currentStartValue-previousEndValue;
if(differenceInValue!=1)
{
//must show an error.
}
}
else if(rowCount>1 && columnCount==4)
{
var previousEndValue = $(this).find('input[name^="end"]').val();

//alert("currentStartValue:"+currentStartValue);
//alert("previousEndValue:"+previousEndValue);
}
})
}
)

}

[paul_wilkins]

Now I am stuck here how to assign the rule where the first start value must be 0.

If the first value must be 0, when why do you even allow the user the possibility to change it?

Make the ID field readonly and you don't need any validation there at all.

You could even just make it text and use a hidden field to store the id value.

[newtomysql]

Dear Paul,
I dont know how to fix it such a way because then when I clone it will follow that too right. Another then how to assign the rule when I check the previous end and the next start row.

[newtomysql]

Dear Paul,
Can you visit this link http://183.78.169.54/v3/class.php. If you try to add you will notice the "Start" column value is now always zero and I am not allowed to edit it. I want onlt the first row "Start" column zero.

[paul_wilkins]

I want onlt the first row "Start" column zero.

I want to understand what you are saying but I can't.

[newtomysql]

Dear Paul,
Sorry for the miscommunication. Ok if you visit this site http://183.78.169.54/v3/class.php. You will notice there is a column "Classification" and besideis the column "Start". You can try to add rows and notice each of the column "Start" value is 0 but I just want the first row "Start" column to be 0. How to settle that ya. Secondly how to settle in such the previous "End" column and current "Start" column value difference is just 1.

[paul_wilkins]

Dear Paul,
Sorry for the miscommunication. Ok if you visit this site http://183.78.169.54/v3/class.php. You will notice there is a column "Classification" and besideis the column "Start". You can try to add rows and notice each of the column "Start" value is 0 but I just want the first row "Start" column to be 0. How to settle that ya. Secondly how to settle in such the previous "End" column and current "Start" column value difference is just 1.

It's not too difficult to look at the previous row and get the number from the end column, but there are likely to be other situations that you may not have considered yet.

What happens when you have three rows, and the middle row is removed?

The start and end numbers could be:

Start       End
[0       ] [4       ]
[5       ] [8       ]
[9       ] [14      ]

When the middle row with 5 8 is removed, how do you want the numbers on the other rows to be affected?


Would it not be better to have a single "number of items" field for people to enter, and a text start/end after it that automatically update themself?

# of Items   Start   End
[5       ]   0       4
[4       ]   5       8
[6       ]   9       14

[newtomysql]

Dear Paul,
How about I only validate when the button Submit is press meaning that is final before is it being submit. So in that event if the row is removed then when is submit then is properly validated right. Can we do that way ? So what is you solution for this matter?