jQuery validating multiple form fields

Question

Fairly new to jquery but I realize my code could be condensed. It works just fine but there's got to be a better way to do this as it kind of seems like redundant code. I've got two input fields and a textarea that I'm validating see below. Code samples would be ideal since I'm still learning but any help is appreiacted:

$("form#designForm").submit(function(){

    if($("#ccDesignFirstName").val().length == 0){
      alert("Full Name field is required");
      $("#ccDesignFirstName").focus();
      return false;
    }        

    if($(".telephoneInput").is(":visible")){
        if($("#ccDesignTelephone").val().length == 0){
          alert("Phone is required");
          $("#ccDesignTelephone").focus();
          return false;
        }
    }

    if($("#ccDesignProblem").val().length == 0){
      alert("Question is required");
      $("#ccDesignProblem").focus();
      return false;
    }
});

It is indeed redundant. You should look into functions, arrays and loops, so basically learn Javascript. jQuery is nothing more than a tool that helps with the DOM and Ajax. — kapa
– kapa, Commented May 9, 2013 at 22:03

Waqleh · Accepted Answer · 2013-05-09 22:47:50Z

1

To iterate through all the inputs in a form you can do this:

$("form#designForm").submit(function(){
    var valid = true;
    $("form#designForm :input").each(function(){
        //$(this) is the jquery object of the input.
        //do your validation here
        if($(this).val().length == 0){
            valid = false;
        }
        //some more validation if needed...
    });
    return valid;
});

This uses the jquery [:input selector][1] to get ALL types of inputs, if you just want text you can do :

$("form#designForm input[type=text]")

etc.

answered May 9, 2013 at 22:47

Waqleh

10.2k10 gold badges69 silver badges104 bronze badges

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

1 Comment

Delmon Young Over a year ago

Thanks for the reply @Waleed Akleh I'm kind of confused on why you have the valid variable. Also say I wanted to target a specific field. For instance I want to have a different type of validation for the phone number. How would I go about doing that

AlbertEngelB · Accepted Answer · 2013-05-10 01:14:33Z

Yeah, there are a few different strategies for form validation you can do. My personal favorite is to add classes to the elements you want to validate.

Need all fields to not be left blank? Add check-empty class to the inputs. Need to check for email validation? Add an email class. In your JavaScript you can then use a single jQuery selector and go over each input by category and ensure that each check passes.

I went a little overboard here and used .apply() for each function. In all honesty this technique will not hold up if you need to do something asynchronous (AJAX request to the server to ensure the email is unique, for example).

If you need to check with AJAX, you would need to use callbacks to ensure everything validated. Generally speaking, something like that happens once or twice, so there's no need to get too fancy with it. If you do have a form that is very AJAX-call heavy, you may consider using jQuery's $.Deferred.

Let me know if you have any questions. This is just my personal take on form validation, I'm there are very many more ways of doing it as well. I find validating via CSS rules allows you to check fields in other areas as well. And this is pretty reusable; form validation is a common task on the web. Once you have a solid solution, it's just a matter of applying it to your particular situation.

Collectives™ on Stack Overflow

jQuery validating multiple form fields

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related