6

I have a webpage that has a textbox.

When the user enters information into it, it makes a AJAX call to see if the entry is valid, if not it disables a button.

They can also add up to 10 textboxes which is done via jQuery Templates. At the moment each textbox has a class of serial and when a serial textbox is blurred it does this check.

If they enter a invalid serial it will disable the button but if they add a new textbox and that is valid the button is now enabled which is wrong as there is one still invalid.

The only way I can think to do this is to add a 1 or 0 to an array for each textbox and once all elements in the array are 1 then enable the button. Is that a good approach, if not please explain a better one. If it is a good approach how do I check all values in a javascript array are the same?

Thanks

Improve this question
3
  • Can you clarify what you mean by 'when a serial textbox is blurred'? Commented Jun 8, 2011 at 10:44
  • @Charles When the blur event is fired at that textbox... Commented Jun 8, 2011 at 10:44
  • yeah do it , i think it would be allright to set 0 1 to check the state of each textbox and you have to loop javascript array to find out which one is 0 or 1 Commented Jun 8, 2011 at 10:45

4 Answers 4

Reset to default
4

This sounds like a good approach. You can check for equal elements in a javascript array using this simple javascript function. You may paste this to a firebug console to check its functionality.

// check if all elements of my_array are equal, my_array needs to be an array
function check_for_equal_array_elements(my_array){
  if (my_array.length == 1 || my_array.length == 0) {
     return true;
  }
  for (i=0;i<my_array.length;i++){
     if (i > 0 && my_array[i] != my_array[i-1]) {
       return false;
     }
  }
  return true;
}

//Example:
var my_array = [];
my_array.push(5);
my_array.push(5);

// will alert "true"
alert("all elements equal? "+check_for_equal_array_elements(my_array));

my_array.push(6);
// will alert "false"
alert("all elements equal? "+check_for_equal_array_elements(my_array));
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I will assume you have a isValid(str) function that returns a boolean.

Since you're using jQuery, you can take advantage of jQuery's filter() function to easily check if any inputs are invalid whenever an input blurs:

$('.serial').live('blur', function () {

    // Get an array of all invalid inputs
    var invalids = $('.serial').filter(function () {
        return !isValid($(this).val());
    });

    // Does the array contain anything?
    $('#button').prop('disabled', invalids.length);

});

Demo: http://jsfiddle.net/3RNV6/

Similar concept, but for use with AJAX:

$('.serial').live('blur', function () {
    var me = this;

    $.ajax({
       // ajax config
       success: function (data) {
           if (data === 'Y') $(me).addClass('valid');

           // Get an array of all invalid inputs
           var invalids = $('.serial').filter(function () {
               return !$(this).hasClass('valid');
           });

           // Enable if none invalid
           if (invalids.length === 0) $('#button').prop('disabled', false);
       }
    });
});

$('.serial').live('keypress', function () {
    $('#button').prop('disabled', true);
    $(this).removeClass('valid');
});
Improve this answer

8 Comments

Problem is I'm not checking the value of the textbox clientside, I only know if its valid by the response from my AJAX request so all I have is Y or N
@Jon, sorry I missed the AJAX requirement. In that case you must disable the button on change and removeClass('valid'). Also addClass('valid') to the input when the AJAX request returns. Once you do that, simply return $(this).hasClass('valid') from the filter function.
How do I get reference to the textbox that made the AJAX call in the success method to do addClass("valid")?
Thanks you changed it to keypress opposed to change. Any reason. I have to use attr as well instead of prop. For some reason the latest jquery breaks my page.
@Jon, both change and keypress will work - it just depends on how responsive you want the disabling to be. keypress will cause the button to be disabled as soon as a character is entered, while change will wait until the textbox loses focus. attr is just fine, even in the latest version.
|
0

First of if you dynamically create n textboxes you should use live() or delegate() methods of jQuery to inform of new DOM elements added.

Secondly your approach is just fine but instead of an array you can set param of inputs with wrong text and then disable button if there are any elements with wrong text. I think it will be faster than looping though all textboxes all over.

Improve this answer

Comments

0

I would use validation to achieve this.

http://docs.jquery.com/Plugins/Validation#Demos

If you can validate client-side great - either use one of the existing jQuery validation functions shown in the link above, or write your own.

If you must validate server side via ajax, then you could build this into a custom validation routine.

Then in the call that shows/hides the button - make a call to $('#formid).validate() - returns false if any validation fails.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.