JS validation issue

Question

My validation function looks like that.

var fname = $("#fname").val();
var lname = $("#lname").val();

function validate() {
    var isValid = true;
     if (!fname) {
            $("#fname").attr('class', 'invalid');
            isValid=false;
        }

    if (!lname) {
        $("#lname").attr('class', 'invalid');
        isValid=false;
    }

It simply changes the class of unfilled input box.

I know that i can write else for every if and change back to default (class="valid") if user fills some of inputs. But how can i create something universal for all inputs to change back to default class the input that user has filled after first validation error?

you can use addClass method. add invalid class to object $('your_selector').addClass('invalid') and after validation just use $('your_selector').removeClass('invalid') — FoRever_Zambia
– FoRever_Zambia, Commented Nov 7, 2011 at 13:59

Mike Samuel · Accepted Answer · 2011-11-20 18:27:57Z

1

That was good Tural! HOWEVER, why the excess processing in your code? That will add unecessary stress. Since you, for what you "solved", will add the "valid" class to ALL the input type text or password, just add that to the actual input element in the straight code:

<input class='valid' ..... />

Now, back to your original validation: why not make it universal?:

function validate(formField) {
    if !formField $('#'+formField).removeClass('valid').addClass('invalid');
}

Or something in that vein ...

edited Nov 20, 2011 at 18:27

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

answered Nov 7, 2011 at 14:24

zequinha-bsb

7094 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tural Ali Over a year ago

I already added valid class + read my answer, once more. That is the keypress function, "will add the "valid" class to ALL the input type text or password"- it will add valid class only when user presses the key

zequinha-bsb Over a year ago

One of the ways would be: form .... onSubmit='validateIt(this);' and a validate it would go through the items in the form and send each item to validate(item). Ex.: function validateIt(formID) { for each ... validate(item) ... }

Mike Samuel Over a year ago

The if !formfield bit is not syntactically valid. Would removing those two tokens be closer to what you're trying to do.

zequinha-bsb Over a year ago

What did you fix? SO should have the ability to just strike out what the so called "editors" fix. Now I don't know how much I can trust you (not that I don't) to have fixed ... a problem that did not exist ... for 13 days.

Mike Samuel · Accepted Answer · 2011-11-07 14:14:39Z

1

You can either assume everything is valid and then try to disprove that or you can try to prove its validity. The below takes the first approach and sets all the classes to "valid" to be consistent with that.

function validate() {
  // Get the current form input state.
  var fname = $("#fname");
  var lname = $("#lname");

  // Assume everything valid until proven otherwise.
  var isValid = true;
  fname.attr('class', 'valid');
  lname.attr('class', 'valid');

  if (!fname.val()) {
    fname.attr('class', 'invalid');
    isValid=false;
  }

  if (!lname.val()) {
    lname.attr('class', 'invalid');
    isValid=false;
  }

  return isValid;
}

edited Nov 7, 2011 at 14:14

answered Nov 7, 2011 at 14:07

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

Tural Ali · Accepted Answer · 2011-11-07 14:41:04Z

0

Ok. I found the way

  $('input[type="text"],input[type="password"]').keypress(function () {
        $(this).attr('class', 'valid');
});

edited Nov 7, 2011 at 14:41

answered Nov 7, 2011 at 14:08

Tural Ali

23.5k18 gold badges82 silver badges134 bronze badges

Collectives™ on Stack Overflow

JS validation issue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related