Ok guys, before I continue, I know what I want to do could be done with numerous variables etc. but I've gotta imagine that what I'm doing can be done much more simply. So what I have is a form that has 4 fields and I want to check if anyone of the four are blank. Then each one that is blank, I want to add a class and use the jquery UI effect 'shake' to notify. Then I want to get a true or false response, true being that all aren't blank and false being that any one of the 4 is blank. so what I have is.. HTML...

<form name = "regin" id = "regin">
  <div id = "form_hold">
  <div><label>Username</label><input type="text" id = "Rusername" name = "Rusername" /><div class = 'verdiv' id = 'rvuname'></div></div>
  <div><label>Email</label><input type="text" id = "Remail" name = "Remail" /><div class = 'verdiv' id = 'rvemail'></div></div>
  <div><label>Password</label><input type="password" id = "Rpassword" name = "Rpassword" /><div class = 'verdiv' id = 'rvpass1'></div></div>
  <div><label>Confirm</label><input type="password" id = "Rpassword2" name = "Rpassword2" /><div class = 'verdiv' id = 'rvpass2'></div></div>
  </div>
  <button type="button" class = "thoughtbot" id = "registerButton">Register</button>
  </form>

and the javascript/jquery...

if($username == ''){
    $('#Rusername').parent().find('.verdiv').addClass('error');
    $('#Rusername').parent().effect("shake", { times:3 }, 50);
}
if($email == ''){
    $('#Remail').parent().find('.verdiv').addClass('error');
    $('#Remail').parent().effect("shake", { times:3 }, 50);
}   
if($password == ''){
    $('#Rpassword').parent().find('.verdiv').addClass('error');
    $('#Rpassword').parent().effect("shake", { times:3 }, 50);
}
if($checkval == ''){
    $('#Rpassword2').parent().find('.verdiv').addClass('error');
    $('#Rpassword2').parent().effect("shake", { times:3 }, 50); 
}

Now is there one top level function to 'test' each one of these statements to see if they're true? Thanks.

Ok guys, before I continue, I know what I want to do could be done with numerous variables etc. but I've gotta imagine that what I'm doing can be done much more simply. So what I have is a form that has 4 fields and I want to check if anyone of the four are blank. Then each one that is blank, I want to add a class and use the jquery UI effect 'shake' to notify. Then I want to get a true or false response, true being that all aren't blank and false being that any one of the 4 is blank. so what I have is.. HTML...

<form name = "regin" id = "regin">
  <div id = "form_hold">
  <div><label>Username</label><input type="text" id = "Rusername" name = "Rusername" /><div class = 'verdiv' id = 'rvuname'></div></div>
  <div><label>Email</label><input type="text" id = "Remail" name = "Remail" /><div class = 'verdiv' id = 'rvemail'></div></div>
  <div><label>Password</label><input type="password" id = "Rpassword" name = "Rpassword" /><div class = 'verdiv' id = 'rvpass1'></div></div>
  <div><label>Confirm</label><input type="password" id = "Rpassword2" name = "Rpassword2" /><div class = 'verdiv' id = 'rvpass2'></div></div>
  </div>
  <button type="button" class = "thoughtbot" id = "registerButton">Register</button>
  </form>

and the javascript/jquery...

if($username == ''){
    $('#Rusername').parent().find('.verdiv').addClass('error');
    $('#Rusername').parent().effect("shake", { times:3 }, 50);
}
if($email == ''){
    $('#Remail').parent().find('.verdiv').addClass('error');
    $('#Remail').parent().effect("shake", { times:3 }, 50);
}   
if($password == ''){
    $('#Rpassword').parent().find('.verdiv').addClass('error');
    $('#Rpassword').parent().effect("shake", { times:3 }, 50);
}
if($checkval == ''){
    $('#Rpassword2').parent().find('.verdiv').addClass('error');
    $('#Rpassword2').parent().effect("shake", { times:3 }, 50); 
}

Now is there one top level function to 'test' each one of these statements to see if they're true? Thanks.

• javascript
• jquery
• if-statement

• We seem to be missing a bit of your code off, but I assume $username and $email are the values of each input field? – Rory McCrossan Commented Nov 9, 2011 at 16:54
• hey, let me update with the html – Greg Thompson Commented Nov 9, 2011 at 16:56

6 Answers 6

You could loop:

$('#Rusername, #Remail, #Rpassword, #Rpassword2').each(function() {
  if ($(this).val() == '') {
    $(this).parent().effect('shake', {times: 3}, 50).find('.verdiv').addClass('error');
  }
});

But ideally, I would add a class to their parent element and simplify the selector to just this:

$('.parent_class input');

EDIT: The code was not complete - I removed a left curly brace.

Put the same class on each of the input fields to be validated, for example validatefield.

Then assuming that $username and $email are the values of each input field, this should work:

var valid = true;
$(".validatefield").each(function() {
    if ($(this).val() == "") {
        $(this).parent().find('.verdiv').addClass('error');
        $(this).parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

    $('input [type=text]').each(function(event){
    if($(this).val()=='')
    {
    //Do here shaking and error showing.
    }
    });

What about:

$("form input:text").each(function() {
    if ($(this).val() == "") {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

--EDIT--

To answer your additional question, you could add an attribute to the fields, e.g. data-type="email", etc. then modify the javascript thus:

$("form input:text").each(function() {
    var isValid = new Function("value", "validate" + $(this).attr("data-type") + "(value);");
    if ($(this).val() == "" && !isValid($(this).val())) {
       $(this).parents().find('.verdiv').addClass('error');
       $(this).parent().effect("shake", { times:3 }, 50);
    }
});

You'd need to add functions for "validateemail", "validatetext", etc. that return a true for a valid field and false for an invalid field.

You could add a data-validate=true attribute to each input, then do it like so:

function validate() {
var valid = true;
$("[data-validate]").each(function () {
    var el = $(this);
    if(el.val() == "") {
        el.parent().find('.verdiv').addClass('error');
        el.parent().effect("shake", { times:3 }, 50);
        valid = false;
    }
});

return valid
}

Little bit complex and dirty, but may works.

var items = { 'username':'Rusername', 'email':'Remail', 'password':'Rpassword', 'checkval':'Rpassword2' };
$.each( items, function( val, id ) {
    eval('if($'+val+' == \'\') { ....copy your codes here... }');
});