1

JavaScriptでフォームを検証するのに問題があります。現在、テキストフィールドのみをチェックしていますが、機能しません。私のコードは次のとおりです。

index.html：

<html xmlns = "http://www.w3.org/1999/xhtml">
<head> 
    <title>
        Validation Form
    </title>
    <script type = "text/javascript" src ="vForm.js">
    </script>
</head>
<body>
    <form id = "myForm" action ="">
        First name: <input type="text" name="fname"></br>
        Last name: <input type="text" name="lname"></br>
        Password: <input type="password" name="pass1"></br>
        Re-enter password: <input type="password" name="pass2"></br>
        Email: <input type="text" name="email"></br>
        Phone: <input type="text" name="phone"></br>
        Address: <input type="text" name="add"></br>
        Date: <input type="date" name="date"></br>
        Time: <input type="time" name="time"></br>
        <input type="reset" name="reset">
        <input type="submit" name="submit">
    </form>
    <script type = "text/javascript" src ="vFormRun.js">
    </script>
</body>
</html>

vForm.js：

function validateForm()
{
    var fname = document.getElementById("fname");
    var lname = document.getElementById("lname");
    var pass1 = document.getElementById("pass1");
    var pass2 = document.getElementById("pass2");
    var email = document.getElementById("email");

    if(fname == "")
    {
        alert("Please enter first name")
        return false;
    }
    else
    {
        return true;
    }
}

vFormRun.js：

document.getElementById("myForm").onsubmit = validateForm;
4

3 に答える 3

3

あなたはそれのそれぞれに与える必要があります.value。またid、同じのを与えnameます。

function validateForm()
{
 var fname = document.getElementById("fname");
 var lname = document.getElementById("lname");
 var pass1 = document.getElementById("pass1");
 var pass2 = document.getElementById("pass2");
 var email = document.getElementById("email");

 if(fname.value == "")
 {
   alert("Please enter first name")
   return false;
 }
 else
 {
   return true;
 }
}
于 2012-09-30T17:55:04.767 に答える
2 
document.getElementById("fname");

これは、IDが、ではない要素がある場合にのみ機能しfnameます。

次のような要素にID属性を設定できます。

<input type="text" name="fname" id="fname">

または、次のようにフォーム要素を参照することもできます。

var fname = document.forms["myForm"]["fname"]

次にvalue、比較するときにそのプロパティを取得する必要があります。

fname.value

<br>タグは自己閉鎖型なので、代わり<br />に</br>

于 2012-09-30T17:55:47.203 に答える
-1

これが解決策です...

function validateForm(form) {
    var fname = form.fname,
        lname = form.lname,
        pass1 = form.pass1,
        pass2 = form.pass2,
        email = form.email;

    if(fname && fname.value === "") {
        alert("Please enter first name");
        document.getElementById('result').innerHTML = 'Invalid';
        return false;
    }
    document.getElementById('result').innerHTML = 'Passed';
    return true;
}
<form id="myForm" action="" onsubmit="validateForm(this)">
    First name: <input type="text" name="fname"><br/>
    Last name: <input type="text" name="lname"><br/>
    Password: <input type="password" name="pass1"><br/>
    Re-enter password: <input type="password" name="pass2"><br/>
    Email: <input type="text" name="email"><br/>
    Phone: <input type="text" name="phone"><br/>
    Address: <input type="text" name="add"><br/>
    Date: <input type="date" name="date"><br/>
    Time: <input type="time" name="time"><br/>
    <input type="reset" name="reset">
    <input type="submit" name="submit">
  <p id="result">
  </p>
</form>

ここで私が修正したいくつかの問題がありました。

  1. var1つの宣言を使用するようにすべての宣言を変更しましたvar。これはベストプラクティスです。
  2. ifステートメントで、変数fnameが存在し、nullでないことを確認するためのチェックを追加しました（null参照エラーを防止します）。
  3. valueifステートメントでは、フィールド自体ではなく、フィールドの属性をチェックする必要があります。古いコードでは、空白であるかどうかにかかわらず、フィールドはそこにあるはずであり、常にtrueを返していました。
  4. ===の代わりに使用するように比較を変更しました==。を使用==する場合、値が「false」または0の場合、trueを返します。「 JavaScriptでの==と===の違い」を参照してください。
  5. alertステートメントの最後にセミコロンがありませんでした。
  6. 本体がでif終わる場合は、ブロックreturnは必要ありません。elseコードの量を減らし（ダウンロードが速くなり）、読みやすくなります。
于 2012-09-30T18:19:37.773 に答える