表格未通过验证

Question

Can someone tell me what I'm wrong with my code? It's not validating. When I hit the submit button, nothing happens. There's no error message that shows or pop up.

Here is the html of the form

<form name="summerForm" method="post" action="signup.html">
    <h2>Programs</h2>
    <p>Please select the following prgrams:</p>
    <select name="programs">
    <option value="beginningSpanish">Beginning Spanish</option>
    <option value="advancedSpanish">Advanced Spanish</option>
    <option value="conversationalSpanish">Conversational Spanish</option>
    <option value="advancedConversationalSpanish">Advanced Conversational Spanish</option>
    <option value="spanishGrammerAndComposition">Spanish Grammar and Composition</option>
    <option value="culturalTreasuresOfMexico">Cultural Treasures of Mexico</option>
    </select>
    <h2>Parent's Information</h2>   
    <label for="firstName">First Name:</label>
    <input type="text" id="pFirstName" name="pFirstName"/>
    <label for="middleName">Middle Name:</label>
    <input type="text" id="pMiddleName" name="pMiddleName"/>
    <label for="lastName">Last Name:</label>
    <input type="text" id="pLastName" name="LastName"/>
    <br/>
    <strong>Relationship to Child:</strong><br/>
    <label for="nameFather">Father</label>
    <input type="radio" id="pFather" name="relationship" value="Father"/>
    <label for="nameMother">Mother</label>
    <input type="radio" id="pMother" name="relationship" value="Mother"/>
    <label for="nameGuardian">Guardian</label>
    <input type="radio" id="pGuardian" name="relationship" value="Guardian"/>
    <br/>
    <label for="address1">Address</label>
    <input type="text" id="pAddress" name="pAddress"/><br/>
    <label for="city1">City</label>
    <input type="text" id="pCity" name="pCity"/>
    <label for="state1">State</label>
    <input type="text" id="pState" size="2" maxlength="2" name="pState"/>
    <label for="zipCode1">Zip Code</label>
    <input type="text" size="5" maxlength="5" id="pZipCode" name="pZipCode"/><br/>
    <label for="homePhone">Home Phone</label>
    <input type="text" id="pHomePhone" name="pHomePhone"/>
    <label for="cellPhone">Cell Phone</label>
    <input type="text" id="pCellPhone" name="pCellPhone"/><br/>
    <label for="emailAddress">Email Address:</label>
    <input type="text" id="pEmailAddress" name="pEmailAddress"/>
    <h2>Child's Information</h2>
    <label for="cFirstName">First Name:</label>
    <input type="text" id="cFirstName" name="cFirstName"/>
    <label for="cMiddleName">Middle Name:</label>
    <input type="text" id="cMiddleName" name="cMiddleName"/>
    <label for="cLastName">Last Name:</label>
    <input type="text" id="cLastName" name="cLastName"/><br/>
    <label for="secondName">Name the child goes by:</label>
    <input type="text" id="secondName" name="secondName"/><br/>
    Photo of child. (recommended format: 400x400 .jpg)<br/>
    <input type="file" name="photo"/><br/>
    <strong>Gender:</strong><br/>
    <label for="cMale">Male</label>
    <input type="radio" id="cMale" name="sex" value="Male"/>
    <label for="cFemale">Female</label>
    <input type="radio" id="cFemale" name="sex" value="Female"/><br/>
    <label for="cDOB">Date of Birth:</label>
    <input type="date" id="cDOB" size="12" maxlength="10" placeholder="MM/DD/YYYY" name="cDOB"/><br/>
    <label for="cMedical">Medical Conditions:</label><br/>
    <textarea id="cMedical" name="comments">&nbsp;</textarea><br/>
    <label for="cSDR">Special Dietary Requirements:</label><br/>
    <textarea id="cSDR" name="comments">&nbsp;</textarea><br/>
    <p><strong>Secondary Emergency Contact</strong></p>
    First Name
    <input type="text" name="sFirstName"/>
    Last Name
    <input type="text" name="sLastName"/>
    Phone Number
    <input type="text" name="sPhoneNumber"/><br/>
    <input type="submit" name="submit" value="Submit"/>
    </form>

Here is the Jquery/Javascript

$(document.ready( function() {
var errorStatusHandle = $('.errorMessage');
var elementHandle = new Array (15);

elementHandle[0] = $('[name="pFirstName"]');
elementHandle[1] = $('[name="pLastName"]');
elementHandle[2] = $('[name="pAddress"]');
elementHandle[3] = $('[name="pCity"]');
elementHandle[4] = $('[name="pState"]');
elementHandle[5] = $('[name="pZipCode"]');
elementHandle[6] = $('[name="pCellPhone"]');
elementHandle[7] = $('[name="pEmailAddress"]');
elementHandle[8] = $('[name="cFirstName"]');
elementHandle[9] = $('[name="cLastName"]');
elementHandle[10] = $('[name="secondName"]');
elementHandle[11] = $('[name="cDOB"]');
elementHandle[12] = $('[name="sFirstName"]');
elementHandle[13] = $('[name="sLastName"]');
elementHandle[14] = $('[name="sPhoneNumber"]');

function isValidData() {
    if(isEmpty(elementHandle[0].val())) {
        elementHandle[0].addClass("error");
        errorStatusHandle.text("Please enter your first name.");
        elementHandle[0].focus();
        return false;
        }

    if(isEmpty(elementHandle[1].val())) {
        elementHandle[1].addClass("error");
        errorStatusHandle.text("Please enter your last name.");
        elementHandle[1].focus();            
        return false;
        }

    if(isEmpty(elementHandle[2].val())) {
        elementHandle[2].addClass("error");
        errorStatusHandle.text("Please enter your address.");
        elementHandle[2].focus();            
        return false;
        }

    if(isEmpty(elementHandle[3].val())) {
        elementHandle[3].addClass("error");
        errorStatusHandle.text("Please enter your city.");
        elementHandle[3].focus();            
        return false;
        }

    if(isEmpty(elementHandle[4].val())) {
        elementHandle[4].addClass("error");
        errorStatusHandle.text("Please enter your state.");
        elementHandle[4].focus();            
        return false;
        }

    if(!isValidState(elementHandle[4].val())) {
        elementHandle[4].addClass("error");
        errorStatusHandle.text("The state appears to be invalid, "+
        "please use the two letter state abbreviation");
        elementHandle[4].focus();            
        return false;
        }

    if(isEmpty(elementHandle[5].val())) {
        elementHandle[5].addClass("error");
        errorStatusHandle.text("Please enter your zip code.");
        elementHandle[5].focus();
        return false;
        }

    if(isEmpty(elementHandle[6].val())) {
        elementHandle[6].addClass("error");
        errorStatusHandle.text("Please enter your cell phone number.");
        elementHandle[6].focus();
        return false;
        }

    if(isEmpty(elementHandle[7].val())) {
        elementHandle[7].addClass("error");
        errorStatusHandle.text("Please enter your email adddress.");
        elementHandle[7].focus();
        return false;
        }

    if(isEmpty(elementHandle[8].val())) {
        elementHandle[8].addClass("error");
        errorStatusHandle.text("Please enter your child's first name.");
        elementHandle[8].focus();
        return false;
        }

    if(isEmpty(elementHandle[9].val())) {
        elementHandle[9].addClass("error");
        errorStatusHandle.text("Please enter your child's last name.");
        elementHandle[9].focus();
        return false;
        }

    if(isEmpty(elementHandle[10].val())) {
        elementHandle[10].addClass("error");
        errorStatusHandle.text("Please enter your child's name that he/she wish to go by.");
        elementHandle[10].focus();
        return false;
        }

    if(isEmpty(elementHandle[11].val())) {
        elementHandle[11].addClass("error");
        errorStatusHandle.text("Please enter your child's date of birth.");
        elementHandle[11].focus();
        return false;
        }

    if(isEmpty(elementHandle[12].val())) {
        elementHandle[12].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact first name.");
        elementHandle[12].focus();
        return false;
        }

    if(isEmpty(elementHandle[13].val())) {
        elementHandle[13].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact last name.");
        elementHandle[13].focus();
        return false;
        }

    if(isEmpty(elementHandle[14].val())) {
        elementHandle[14].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact phone number.");
        elementHandle[14].focus();
        return false;
        }

    return true;
    }       

elementHandle[0].focus();

$(':submit').on('click', function() {
    for(var i=0; i < 10; i++)
    elementHandle[i].removeClass("error");
    errorStatusHandle.text("");
    return isValidData();
    });

}));

Answer 1

isEmpty function is not defined

isValidState function is not defined

instead of:

$(':submit').on('click', function() {

use:

$('form').submit(function() {

Answer 2

Okay, let's fix this

For starters, you didn't include the isEmpty() function. Therefore, when the code you included was run, your isValidData() function caused an error, which stopped the form from returning false. isValidState() is also undefined, but I'm not going to write that for you

Secondly, I'd suggest instead of using the click event on :submit, use the submit event on form[name=summerForm]. First it narrows your validity checking to just the form you want, and secondly there are more ways to submit a form than just clicking the button. This will catch those.

Thirdly, and most importantly, you didn't include an error message element. The reason you're not seeing anything, is because while you set a .text to .errorMessage, .errorMessage doesn't exist. Refer to this fiddle

http://jsfiddle.net/kaexgob8/

HTML:

<form name="summerForm" method="post" action="signup.html">
    <h2>Programs</h2>
    <p>Please select the following prgrams:</p>
    <select name="programs">
    <option value="beginningSpanish">Beginning Spanish</option>
    <option value="advancedSpanish">Advanced Spanish</option>
    <option value="conversationalSpanish">Conversational Spanish</option>
    <option value="advancedConversationalSpanish">Advanced Conversational Spanish</option>
    <option value="spanishGrammerAndComposition">Spanish Grammar and Composition</option>
    <option value="culturalTreasuresOfMexico">Cultural Treasures of Mexico</option>
    </select>
    <h2>Parent's Information</h2>   
    <label for="firstName">First Name:</label>
    <input type="text" id="pFirstName" name="pFirstName"/>
    <label for="middleName">Middle Name:</label>
    <input type="text" id="pMiddleName" name="pMiddleName"/>
    <label for="lastName">Last Name:</label>
    <input type="text" id="pLastName" name="LastName"/>
    <br/>
    <strong>Relationship to Child:</strong><br/>
    <label for="nameFather">Father</label>
    <input type="radio" id="pFather" name="relationship" value="Father"/>
    <label for="nameMother">Mother</label>
    <input type="radio" id="pMother" name="relationship" value="Mother"/>
    <label for="nameGuardian">Guardian</label>
    <input type="radio" id="pGuardian" name="relationship" value="Guardian"/>
    <br/>
    <label for="address1">Address</label>
    <input type="text" id="pAddress" name="pAddress"/><br/>
    <label for="city1">City</label>
    <input type="text" id="pCity" name="pCity"/>
    <label for="state1">State</label>
    <input type="text" id="pState" size="2" maxlength="2" name="pState"/>
    <label for="zipCode1">Zip Code</label>
    <input type="text" size="5" maxlength="5" id="pZipCode" name="pZipCode"/><br/>
    <label for="homePhone">Home Phone</label>
    <input type="text" id="pHomePhone" name="pHomePhone"/>
    <label for="cellPhone">Cell Phone</label>
    <input type="text" id="pCellPhone" name="pCellPhone"/><br/>
    <label for="emailAddress">Email Address:</label>
    <input type="text" id="pEmailAddress" name="pEmailAddress"/>
    <h2>Child's Information</h2>
    <label for="cFirstName">First Name:</label>
    <input type="text" id="cFirstName" name="cFirstName"/>
    <label for="cMiddleName">Middle Name:</label>
    <input type="text" id="cMiddleName" name="cMiddleName"/>
    <label for="cLastName">Last Name:</label>
    <input type="text" id="cLastName" name="cLastName"/><br/>
    <label for="secondName">Name the child goes by:</label>
    <input type="text" id="secondName" name="secondName"/><br/>
    Photo of child. (recommended format: 400x400 .jpg)<br/>
    <input type="file" name="photo"/><br/>
    <strong>Gender:</strong><br/>
    <label for="cMale">Male</label>
    <input type="radio" id="cMale" name="sex" value="Male"/>
    <label for="cFemale">Female</label>
    <input type="radio" id="cFemale" name="sex" value="Female"/><br/>
    <label for="cDOB">Date of Birth:</label>
    <input type="date" id="cDOB" size="12" maxlength="10" placeholder="MM/DD/YYYY" name="cDOB"/><br/>
    <label for="cMedical">Medical Conditions:</label><br/>
    <textarea id="cMedical" name="comments">&nbsp;</textarea><br/>
    <label for="cSDR">Special Dietary Requirements:</label><br/>
    <textarea id="cSDR" name="comments">&nbsp;</textarea><br/>
    <p><strong>Secondary Emergency Contact</strong></p>
    First Name
    <input type="text" name="sFirstName"/>
    Last Name
    <input type="text" name="sLastName"/>
    Phone Number
    <input type="text" name="sPhoneNumber"/><br/>
    <input type="submit" name="submit" value="Submit"/>
    <div class='errorMessage' ></div>
</form>

JS:

var errorStatusHandle = $('.errorMessage');
var elementHandle = new Array (15);

elementHandle[0] = $('[name="pFirstName"]');
elementHandle[1] = $('[name="pLastName"]');
elementHandle[2] = $('[name="pAddress"]');
elementHandle[3] = $('[name="pCity"]');
elementHandle[4] = $('[name="pState"]');
elementHandle[5] = $('[name="pZipCode"]');
elementHandle[6] = $('[name="pCellPhone"]');
elementHandle[7] = $('[name="pEmailAddress"]');
elementHandle[8] = $('[name="cFirstName"]');
elementHandle[9] = $('[name="cLastName"]');
elementHandle[10] = $('[name="secondName"]');
elementHandle[11] = $('[name="cDOB"]');
elementHandle[12] = $('[name="sFirstName"]');
elementHandle[13] = $('[name="sLastName"]');
elementHandle[14] = $('[name="sPhoneNumber"]');   

function isEmpty(val)
{
    if(val == '' || val === null || val === undefined)
        return true;

    return false;
}

function isValidData() 
{
    if(isEmpty(elementHandle[0].val())) {
        elementHandle[0].addClass("error");
        errorStatusHandle.text("Please enter your first name.");
        elementHandle[0].focus();
        return false;
        }

    if(isEmpty(elementHandle[1].val())) {
        elementHandle[1].addClass("error");
        errorStatusHandle.text("Please enter your last name.");
        elementHandle[1].focus();            
        return false;
        }

    if(isEmpty(elementHandle[2].val())) {
        elementHandle[2].addClass("error");
        errorStatusHandle.text("Please enter your address.");
        elementHandle[2].focus();            
        return false;
        }

    if(isEmpty(elementHandle[3].val())) {
        elementHandle[3].addClass("error");
        errorStatusHandle.text("Please enter your city.");
        elementHandle[3].focus();            
        return false;
        }

    if(isEmpty(elementHandle[4].val())) {
        elementHandle[4].addClass("error");
        errorStatusHandle.text("Please enter your state.");
        elementHandle[4].focus();            
        return false;
        }

    if(!isValidState(elementHandle[4].val())) {
        elementHandle[4].addClass("error");
        errorStatusHandle.text("The state appears to be invalid, "+
        "please use the two letter state abbreviation");
        elementHandle[4].focus();            
        return false;
        }

    if(isEmpty(elementHandle[5].val())) {
        elementHandle[5].addClass("error");
        errorStatusHandle.text("Please enter your zip code.");
        elementHandle[5].focus();
        return false;
        }

    if(isEmpty(elementHandle[6].val())) {
        elementHandle[6].addClass("error");
        errorStatusHandle.text("Please enter your cell phone number.");
        elementHandle[6].focus();
        return false;
        }

    if(isEmpty(elementHandle[7].val())) {
        elementHandle[7].addClass("error");
        errorStatusHandle.text("Please enter your email adddress.");
        elementHandle[7].focus();
        return false;
        }

    if(isEmpty(elementHandle[8].val())) {
        elementHandle[8].addClass("error");
        errorStatusHandle.text("Please enter your child's first name.");
        elementHandle[8].focus();
        return false;
        }

    if(isEmpty(elementHandle[9].val())) {
        elementHandle[9].addClass("error");
        errorStatusHandle.text("Please enter your child's last name.");
        elementHandle[9].focus();
        return false;
        }

    if(isEmpty(elementHandle[10].val())) {
        elementHandle[10].addClass("error");
        errorStatusHandle.text("Please enter your child's name that he/she wish to go by.");
        elementHandle[10].focus();
        return false;
        }

    if(isEmpty(elementHandle[11].val())) {
        elementHandle[11].addClass("error");
        errorStatusHandle.text("Please enter your child's date of birth.");
        elementHandle[11].focus();
        return false;
        }

    if(isEmpty(elementHandle[12].val())) {
        elementHandle[12].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact first name.");
        elementHandle[12].focus();
        return false;
        }

    if(isEmpty(elementHandle[13].val())) {
        elementHandle[13].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact last name.");
        elementHandle[13].focus();
        return false;
        }

    if(isEmpty(elementHandle[14].val())) {
        elementHandle[14].addClass("error");
        errorStatusHandle.text("Please enter your emergency contact phone number.");
        elementHandle[14].focus();
        return false;
        }

    return true;
}  

$('form [name=summerForm]').on('submit', function() 
{     
    for(var i=0; i < 10; i++)
        elementHandle[i].removeClass("error");

    errorStatusHandle.text("");
    var valid = isValidData();
    return valid;
});

.errorMessage {
    color: red;
}

Answer 3

Try to use jQuery Validation.

<form name="summerForm" id="summerFormID" method="post" action="signup.html">
    <select name="programs">
    // options
    </select>
    <input type="text" id="pFirstName" name="pFirstName"/>
    <label for="middleName">Middle Name:</label>
    <input type="text" id="pMiddleName" name="pMiddleName"/>
    <label for="lastName">Last Name:</label>
    <input type="text" id="pLastName" name="LastName"/>
    <br/>
    . . .
        <input type="submit" name="submit" value="Submit"/>
</form>

jQuery/js:

jQuery(document).ready(function(){

    $('#summerFormID').validate({
        rules: {
            programs:{
                required: true
            },
            pFirstName:{ 
                required: true
            },
            pMiddleName:{
                required: true
            },
            pLastName:{
                required: true
            }
        },
        messages: {
            programs:{
                required: "please select a program!"
            },
            pFirstName:{ 
                required: "FirstName required!"
            },
            pMiddleName:{
                required: "MiddleName required!"
            },
            pLastName:{
                required: "Last Name Required!"
            }   

        },
        submitHandler: function(form){
            form.submit();
        }
    });
});

*You can also try other validation rules or make your own rule. See jQuery Validation page. And don't forget to add the plugin in your program/project.