1

何らかの理由で、送信ボタンをクリックすると、validate() 関数を参照していないようです。コンソールに表示されないだけかもしれませんが、送信ボタン/検証機能に間違いがあります。正しい onSubmit 構文を調べたところ、validate() 関数が機能しているように見えますが、送信ボタンをクリックしても何も起こりません。すべての提案は大歓迎です。

html5 コード:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <title></title>
    </head>
    <body>
        <form onSubmit="return validate()">
        First name: <input id = "firstName" type="text" name="firstname" value=""><br/> 
        Last name: <input id = "lastName" type="text" name="lastname" value="last name"><br/> 
        <div class = "text"><textarea>(Optional Bio)</textarea>
        <p></p> <input type="radio" id = "python">Master Race Python User
        <p></p> <input type="radio" id = "ruby">Imperial Ruby Scum
        </div>

        <div class = "languages">
        <h3>Languages Known</h3>
        <input type="checkbox">Python 
        <input type="checkbox">Ruby
        <input type="checkbox">html
        <input type="checkbox">CSS
        <input type="checkbox">Javascript
        <input type="checkbox">jQuery
        <input type="checkbox">Other
        <input type="checkbox" checked>Filthy casual
        <p><input type ="submit"></p>
        </div>


        </form>
    </body>
</html>

CSS:

.text {
    background-color:#00ffff;
    border:solid black;
    border-radius:3%;
    box-shadow: 5px 5px 5px
}
.languages {
    background-color:#FFFF33;
    border:solid black;
    border-radius:15%;
    box-shadow: 5px 5px 5px;
    margin-top:10px;
}
#check {
    background-color:#ABCDEF;
    border:solid black;
    width:50px;
    margin-left:200px;
    margin-top:10px;
}

#response {
    background-color:#FEDCBA;
}

JavaScript/jquery:

$(document).ready(function(){
    function checkFirstname() {
    var username=$("#firstName").val();
    var namePat = /^[a-z]{2,16}$/i;
    var nameTest = namePat.test(username);

    if(!nameTest) {
        alert("First name may only contain letters and numbers, and must be 2-16 characters in length.");
        return false;
    }
    return true;
}
    function checkLastname() {
    var username=$("#firstName").val();
    var namePat = /^[a-z]{2,16}$/i;
    var nameTest = namePat.test(username);

    if(!nameTest) {
        alert("Last name may only contain letters, and must be 2-16 characters in length.");
        return false;
    }
    return true;
}
function checkSide() {
    var python = document.getElementById("python").checked;
    var ruby = document.getElementById("ruby").checked;

    if(!python && !ruby) {
        alert("Please select a side");
        return false;
    }
    return true;
}
function validate() {
    if(checkFirstname() === false) {
        return false;
    }
    if(checkLastName() ===  false) {
        return false; 
    }
    if(checkSide() === false) {
        return false;
    }
    return true;
}

})
4

2 に答える 2

1

ドキュメントのスコープ内にないため、検証関数は呼び出されていません。代わりに、jQuery の document.ready ショートカットのコールバックとして使用されている無名関数内にスコープが設定されています。この関数を呼び出すには、ページのグローバル スコープに公開する必要があります。これを行う簡単な方法は、次のように定義を変更することです。

window.validate = function() {
  if(checkFirstname() === false) {
    return false;
  }
  if(checkLastName() ===  false) {
    return false; 
  }
  if(checkSide() === false) {
    return false;
  }
 return true;
};

より機能的な方法は、単純にこれを jQuery の document.ready ショートカットに含めて、要素のインライン コードを削除することです ( "onSubmit=validate()")。

$(function(){
 //other code

 $("form")[0].onsubmit = function(){
  return validate();
 }
});
于 2013-09-20T21:25:58.623 に答える
0

問題は、が作成された関数スコープ内validateで定義されているため、関数がにバインドされていないことです。その特定は、同じ関数スコープ内のコードからのみ表示されるため、「onsubmit」コード1 (同じコンテキストで実行されない)のスコープ内にはありません。$document.ready(function ..)window.validatevalidate

また ..

  1. 関数をバインドします。window.validateたとえばwindow.validate = function () { .. }、ick! これは機能しますが、ちょっと面倒で汚染されwindowます。または;

  2. イベントを動的にアタッチします (例:インライン イベント.selectではありません)。この場合、関数オブジェクトは指定された名前で解決できます。これは通常、よりクリーンなオプションであり、私の推奨事項です。

1今後の質問には、関連する (コンソール) エラー メッセージを必ず含めてください。これにより、"ReferenceError: validate is not defined" などの結果になります。

于 2013-09-20T21:21:33.087 に答える