SitePoint Sponsor

User Tag List

Page 5 of 8 FirstFirst 12345678 LastLast
Results 101 to 125 of 184
  1. #101
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    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?
    The rules for each field are updated every time a row is added or removed. They have to be updated like that otherwise removed rows will cause errors, and added rows won't have any rules.

    You will want to use the required rule to always be true on the start and end fields.
    You will also want to use range rule, to specify the max/min for the start and end fields.

    The scripting gets tricky, but with enough functions to help simplify things, it can be relatively straight-forward.

    The minimum value of a start field is obtained by adding one to the previous end value. If that previous value isn't found, we could use 0 as a default minimum.
    Code javascript:
    var min = previousEndField(this).val() + 1 || 0;

    The maximum value of the start field is, well ... is it possible to start and end on the same number? If so, we can say the maximum value value is that of the end value from the same row. If that end field is not found, we can set just set it as the maximum number allowed, which is stored in Number.MAX_VALUE
    Code javascript:
    var max = nextEndField(this).val() || Number.MAX_VALUE;

    You could then set the range with this:

    Code javascript:
    $(this).rules('add', {
        number: true,
        range: [min, max]
    });

    The end fields would have their min/max set in a similar manner.

    Then it's just a matter of coming up with code for these functions:
    • previousEndField()
    • nextEndField()
    • previousStartField()
    • nextStartField()


    You will also want to update those rules whenever one of the start or end numbers changes. If an end rule is reduced, you do need the next start rule to also decrease.
    An easy way to achieve that is to put the setup code for these rules in a separate function called setupStartAndEndRules(form), so that you can call it from both the setupMultipleRowValidation function, as well as from a change event on the fields themself.
    Last edited by paul_wilkins; Apr 3, 2011 at 02:14.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #102
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Yes you are right of I would like to have. But now based on what I have done so far I guess the looping of the tr and td is not needed is it? What should I do next I am a bit stuck here.

  3. #103
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Yes you are right of I would like to have. But now based on what I have done so far I guess the looping of the tr and td is not needed is it?
    That can still be done. The standard range rule is not capable of making use of functions, so you still need to loop through each one and work out the min/max values to apply to each one.

    Quote Originally Posted by newtomysql View Post
    What should I do next I am a bit stuck here.
    Start from the top. You need to set the validation rules for the start/end fields when they change, and when you submit. So, create a function called setupStartAndEndRules(form) into which you can move your existing code for the start and end fields.

    That way you can call it from the end of the setupMultipleRowValidation function, and you can also call it from a change event on the start and end fields.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #104
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok created the function and move the looping codes into the new function. So what must I do next in order for me to assign the rules accordingly.

  5. #105
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Ok created the function and move the looping codes into the new function. So what must I do next in order for me to assign the rules accordingly.
    For each of the start inputs, you can use this code:

    Code javascript:
    var min = Number(previousEndField(this).val()) + 1 || 0;
    var max = Number(nextEndField(this).val()) || Number.MAX_VALUE;
    $(this).rules('add', {
        number: true,
        range: [min, max]
    });

    And for each of the end inputs, you can use this code:

    Code javascript:
    var min = Number(previousStartField(this).val()) || 0;
    var max = Number(nextStartField(this).val()) - 1 || Number.MAX_VALUE;
    $(this).rules('add', {
        number: true,
        range: [min, max]
    });

    The functions for previousEndField(), nextEndField(), previousStartField() and nextStartField() can just be empty placeholders in the meantime.

    for example:

    Code javascript:
    function previousEndField(field) {
        // todo: find and return the end field of the previous row.
        return $();
    }

    That will allow you to check that the default values do their job, after which the details of those functions can be fleshed out.
    Last edited by paul_wilkins; Apr 5, 2011 at 19:32.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #106
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have put the codes accordingly and also put 4 functions too. The problem I dont know how to achieve the previous value using your method I only know the loop method which I have used. Can you see where is my mistake? Thank you.

  7. #107
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Because the value of an empty field is "", you'll need to convert it to a number so that the +1 or -1 operation can occur to it.

    Code javascript:
    var min = Number(previousEndField(this).val()) + 1 || 0;
    var max = Number(nextEndField(this).val()) || Number.MAX_VALUE;
    ...
     
    var min = Number(previousStartField(this).val()) || 0;
    var max = Number(nextStartField(this).val()) - 1 || Number.MAX_VALUE;

    How is previousEndField(this) to return the previous end field? The this keyword is one of the start fields, so to get to the previous end field you would need to go to the previous row, and get the field that starts with "end"

    Code javascript:
    function previousEndField(field) {
        // assume the field variable is a start field
        // and we need to check from the previous row
        return $('input[name^="end"]', $(field).closest('tr').prev('tr'));
    }

    The other functions all work in a similar way.
    The nextEndField() is just getting the "end" input from the same row.
    The previousStartField() is getting the "start" field from the same row.
    The nextStartField() is getting the "start" field from the next row.


    Code javascript:
    function nextEndField(field) {
        // assume field is a start field
        return $('input[name^="end"]', $(field).closest('tr'));
    }
    function previousStartField(field) {
        // assume field is an end field 
        return $('input[name^="start"]', $(field).closest('tr'));
    }
    function nextStartField(field) {    
        // assume field is an end field
        // and we need to check from the next row
        return $('input[name^="start"]', $(field).closest('tr').next('tr'));
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #108
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have implemented the new codes yet the same still got errors. Another thing the "Start" column is always 0 I can not change it.

  9. #109
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    I have implemented the new codes yet the same still got errors.
    Those functions require that only start or end fields are given to them. Is that the case?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #110
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    My latest codes is here http://183.78.169.54/v3/class.php.
    Below is the snippet of the codes. First else if is for the startField and second is the endField. I dont know whether I am doing it correct or not?
    else if(rowCount>1 && columnCount==3) //startField
    {
    var currentStartValue = $(this).find('input[name^="start"]').val();
    var differenceInValue = currentStartValue-previousEndValue;

    var min = Number(previousEndField(this).val()) + 1 || 0;
    var max = Number(nextEndField(this).val()) || Number.MAX_VALUE;

    $(this).rules('add', {
    number: true, range: [min, max]}
    );


    /*if(differenceInValue!=1)
    {
    //must show an error.
    }*/
    }
    else if(rowCount>1 && columnCount==4)//endField
    {
    var previousEndValue = $(this).find('input[name^="end"]').val();
    var min = Number(previousStartField(this).val()) || 0;
    var max = Number(nextStartField(this).val()) - 1 || Number.MAX_VALUE;
    $(this).rules('add',
    {
    number: true, range: [min, max]
    }
    );


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

  11. #111
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    I've been going too fast and leaving you behind, which I apologize for. I'm going to slow things down to try and help you understand the code too, so that you can edit the code without breaking it.

    You know how the this keyword is passed to the functions? Those functions require that it be a start field or an end field that is passed to them.

    Is the this keyword referring to one of those fields, or does it refer to the entire row itself?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #112
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    No problem I can not blame you for your speed as you are professional. From what I guess the this keyword should be referring to the this column right isnt that right?

  13. #113
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    From what I guess the this keyword should be referring to the this column right isnt that right?
    The this keyword needs to refer to one of the start fields, or one of the end fields, for the code to work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #114
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Isnt that when I do this $(this).find('td').each(function() is referring to this column and so when I call this $(this).find('input[name^="start"]').val() is referring to the column itself? I am kind of confuse sorry ya. Maybe you can comment my looping style is it wrong? Thank you.

  15. #115
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Isnt that when I do this $(this).find('td').each(function() is referring to this column and so when I call this $(this).find('input[name^="start"]').val() is referring to the column itself? I am kind of confuse sorry ya. Maybe you can comment my looping style is it wrong? Thank you.
    The value doesn't allow you to gain a reference back to the input field itself.
    If you are going to set up the validation for an input field itself, you will need to have a reference to that actual element. Not just the value of it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #116
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Really need your help on how to pass this reference to the particular function. Just to confirm have it put the codes in the right location. How about the 0 problem for the "Start" field? I can not edit the "Start" field.

  17. #117
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have tried this too previousStartField($('td', this)) still not success. Can you see how to send the reference? Thank you.

  18. #118
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Really need your help on how to pass this reference to the particular function. Just to confirm have it put the codes in the right location. How about the 0 problem for the "Start" field? I can not edit the "Start" field.
    Since we now know that those parts require the this keyword to be either the start or the end field, it seems clear now that they shouldn't be in the part that loops through each row.

    Instead, they could be put in to their own loop.

    Code javascript:
    $('input[name^="start"]', form).each(function () {
        // code here
    });

    And similarly for the end fields too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #119
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I am not clear with your solution what changes you require me to do? Is it that remove the whole loop and now loop through each of the start and end column with two loops is it?Secondly I dont know how to first settle on the "Start" value being 0.

  20. #120
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    [QUOTE=newtomysql;4851232]Dear Paul,
    I am not clear with your solution what changes you require me to do? Is it that remove the whole loop and now loop through each of the start and end column with two loops is it?

    Yes.

    Quote Originally Posted by newtomysql View Post
    Secondly I dont know how to first settle on the "Start" value being 0.
    There is the function called previousEndField, from which you could get the value and add one. If there is no valid value, you can default to 0 instead.

    Hang on, I think that I've already done that for you. Yes, it was in post #105.

    Code javascript:
    var min = Number(previousEndField(this).val()) + 1 || 0;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #121
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have put everything accordingly there is not error. But the validation is not working accordingly. For instance I have row1 0 & 2 then row2 0 & 3. So is does not validate. I need it to be e.g. row1 0 & 2 and row2 3 & 5. Can you see where is my mistake?

  22. #122
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I have put everything accordingly there is not error. But the validation is not working accordingly. For instance I have row1 0 & 2 then row2 0 & 3. So is does not validate. I need it to be e.g. row1 0 & 2 and row2 3 & 5. Can you see where is my mistake?
    You could update the start row when you figure out the minimum value for it.

    Once the code has worked out minimum value, you could update the start field with the new value.
    Last edited by paul_wilkins; Apr 6, 2011 at 18:43.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #123
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I am not clear of your explanation. How do I update the value and when I try to change the values beyond the range there is not validation appearing either too.

  24. #124
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I am not clear of your explanation. How do I update the value
    This is how you would update the value.

    Code javascript:
    $(this).val();

    Quote Originally Posted by newtomysql View Post
    and when I try to change the values beyond the range there is not validation appearing either too.
    Your problem comes from a change you made to an earlier piece of code, which causes the min/max numbers to be wrongly calculated.

    What does this code do?
    Code:
    previousEndField($(this).val())
    Here's a hint - it's not doing what it's supposed to do.
    Refer back to previous posts if you need to, to find out what it should be instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #125
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Thank for the hint that is solved. But if you notice the first row "End" column is showing me value between 0 and -1. I have tried like to update the start value $(this).val = min; but is not working either too.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •