Search jQuery

jQuery Forum

Using jQuery Plugins

jaycbrf4

Help with Select menu validation

in Using jQuery Plugins • 12 years ago

I am using JQuery form and trying to validate that a state was selected.

Here is my form code:

<div id="feedback">
          <p class="error wrong_firstName"> Please fill in your first name</p>
          <p class="error wrong_lastName"> Please fill in your last name</p>
          <p class="error wrong_address"> Please fill in your address</p>
          <p class="error wrong_city"> Please fill in your city</p>
          <p class="error wrong_state"> Please select in your state</p>
          <p class="error wrong_zip"> Please fill in your zip</p>
          <p class="error wrong_email"> Please fill in your email</p>

        </div>
        <form action="sendemail.php" id="contact_us" method="post">
        <fieldset title="listSelect" id="listSelect"><label for="publicList">I want to join the Public list</label><input type="checkbox" name="checkbox" id="publicList" value="publicList" />
<label for="Artist List">I want to join the Artist list</label><input type="checkbox" name="checkbox" id="artistList" value="artistList" /></fieldset><br />
          <label for="firstName">First Name:</label><input name="firstName" type="text" id="firstName" size="20" />
          <label for="lastName">Last Name:</label><input name="lastName" type="text" id="lastName" size="24" /> <br />
          <label for="address">Address:</label> <input name="address" type="text" id="address" size="60" /><br />
          <label for="city">City:</label> <input name="city" type="text" id="city" size="15" />
<select name="state" id="state">
              <option value="Alabama - AL">AL</option>
              <option value="Alaska - AK">AK</option>
              <option value="Arizona - AZ">AZ</option>
              <option value="Arkansas - AR">AR</option>
              <option value="0" selected="selected">State</option>
          </select>
<label for="zip">Zip</label><input name="zip" type="text" id="zip" size="15" maxlength="5" /><br />
          <label for="email">Email</label> <input name="email" type="text" id="email" size="24" /><br />

          <p>Send me info about the following American Art Marketing festivals:</p>
         <fieldset title="showSelect" id="showSelect">
         <input name="berkshires" type="checkbox" id="berkshires" value="Berkshires Arts Festival send info" /><label for="Berkshires"><b>The Berkshires Arts Festival</b>, Great Barrington, MA &diams; July 2-4, 2010</label><br />

         <input name="acs_ny" type="checkbox" id="acs_ny" value="Send me info for the American Craft Show NY" /><label for="acs_ny"><b>American Craft Show NYC</b>, NY &diams; November 19-21, 2010 </label><br />

         <input name="acs_fl" type="checkbox" id="acs_fl" value="Send me info for theAmerican Craft Show Sarasota" /><label for="Sarasota"><b>American Craft Show Sarasota</b>, Sarasota, FL &diams; December 3-5, 2010</label></fieldset><br />
    <br /><br />


          <label for="message">Have questions or comments? Let us know...</label><br /><textarea name="message" rows="8" cols="44" id="message"></textarea><br />
          </p>
          <p id="submit">
            <input type="submit" value="Send" name="submitButton" class="button small" />
          </p>
        </form>
        <p id="success">Your message was sent succesfully!<br />Our mailing list is used as a service to our clients and is not available to anyone for any other use.</p>

Here is my Javascript

var options = {
    beforeSubmit: validate, // pre-submit callback
    success:       showResponse, // post-submit callback
    resetForm: true        // reset the form after successful submit
};

$('#contact_us').ajaxForm(options);

function showResponse(responseText, statusText){
    $('#contact_us').slideUp({ opacity: "hide" }, "normal")
    $('#success').slideDown({ opacity: "show" }, "slow")

}




function validate(formData, jqForm, options) {
    $("p.error").slideUp({ opacity: "hide" }, "fast");

    var firstNameValue = $('input[name=firstName]').fieldValue();
    var lastNameValue = $('input[name=lastName]').fieldValue();
    var addressValue = $('input[name=address]').fieldValue();
    var cityValue = $('input[name=city]').fieldValue();
var stateSelected = $('state').fieldValue();
    var zipValue = $('input[name=zip]').fieldValue();
    var emailValue = $('input[name=email]').fieldValue();


    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var correct = true;

    if (!firstNameValue[0]) {
        $("p.error.wrong_firstName").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }
    if (!lastNameValue[0]) {
        $("p.error.wrong_lastName").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }
    if (!addressValue[0]) {
        $("p.error.wrong_address").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }
    if (!cityValue[0]) {
        $("p.error.wrong_city").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }
    if (!stateSelected[0]) {
        $("p.error.wrong_state").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }
    if (!zipValue[0]) {
        $("p.error.wrong_zip").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }

    if (!emailValue[0]) {
        $("p.error.wrong_email").slideDown({ opacity: "show" }, "slow");
        correct = false;
    } else if(!emailReg.test(emailValue[0])) {
        $("p.error.wrong_email").slideDown({ opacity: "show" }, "slow");
        correct = false;
    }



    if (!correct) {return false;}
}

I'd also like to be able to validate the checkboxes...

Thanks-

Replies(4)

jules

Re: Help with Select menu validation

12 years ago

What are the rules you want the checkboxes to validate against? required?

Have you considered using jquery.validation?

jaycbrf4

Re: Help with Select menu validation

12 years ago

I got the form to validate by adding a # to the select name

var stateSelected = $('#state').fieldValue();

I would like the check boxes just to require that 1 or the other on top is checked.

<fieldset title="listSelect" id="listSelect">
<label for="publicList">I want to join the Public list</label><input type="checkbox" name="checkbox" id="publicList" value="publicList" />

<label for="Artist List">I want to join the Artist list</label><input type="checkbox" name="checkbox" id="artistList" value="artistList" /></fieldset>

- I have thought about jQuery.validation.js, I've used it, but this is a template and all the scripts are pre built. I just need to add this to the form.

thanks-

jules