表格未经验证

时间：2014-10-21 00:42:02

标签： javascript jquery

有人能告诉我我的代码有什么问题吗？它没有验证。当我点击提交按钮时，没有任何反应。没有显示或弹出的错误消息。

这是表单的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"/>
    </form>

这是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();
    });

}））;

3 个答案:

答案 0 :(得分：1)

未定义isEmpty函数

未定义isValidState函数

而不是：

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

使用：

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

答案 1 :(得分：0)

好的，让我们解决这个问题

对于初学者，您没有包含isEmpty（）函数。因此，当您运行的代码运行时，您的isValidData（）函数会导致错误，从而阻止表单返回false。 isValidState（）也是未定义的，但我不打算为你编写

其次，我建议不要使用click事件：submit，在表单[name = summerForm]上使用submit事件。首先，它将您的有效性检查缩小到您想要的形式，其次，提交表单的方式多于单击按钮。这将抓住那些。

第三，最重要的是，您没有包含错误消息元素。您没有看到任何内容的原因是因为当您将.text设置为.errorMessage时，.errorMessage不存在。请参阅这个小提琴

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;
}

答案 2 :(得分：0)

尝试使用jQuery验证。

<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();
        }
    });
});

*您还可以尝试其他验证规则或制定自己的规则。请参阅jQuery Validation页面。不要忘记在程序/项目中添加插件。

相关问题
最新问题