堆棧內存溢出
  簡體   English   中英

表格未通過驗證

[英]Form not validating

 原文  2014-10-21 00:42:01  4   3    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 個解決方案

解決方案1
 1  2014-10-21 01:00:41

未定義isEmpty函數

isValidState函數未定義

代替： 

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

采用： 

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

解決方案2
 0  2014-10-21 01:04:32

好吧，讓我們解決這個問題

對於初學者，您沒有包括isEmpty（）函數。 因此，在運行包含的代碼時，isValidData（）函數導致錯誤，該錯誤使表單不再返回false。 isValidState（）也未定義，但我不會為您編寫

其次，我建議不要在表單[name = summerForm]上使用click事件，而要在：submit上使用click事件。 首先，它將您的有效性檢查范圍縮小到僅所需的表單，其次，除了單擊按鈕之外，還有更多的提交表單的方法。 這將抓住那些。

第三，也是最重要的是，您沒有包含錯誤消息元素。 您看不到任何內容的原因是，當您將.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;
}

解決方案3
 0  2014-10-21 03:37:21

嘗試使用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驗證頁面。 並且不要忘記在您的程序/項目中添加插件。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 驗證表格 通過JavaScript驗證表單 使用 javascript 函數驗證表單 Javascript無法驗證表單中的密碼 jQuery表單未驗證 驗證表單javascript 提交前驗證表格 jQuery插件未驗證表單 驗證問卷表？ 驗證表單上的多個字段
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM