簡體   English   中英

表單未通過驗證

[英]Form does not get validated

我有這段代碼,但是,它沒有驗證表單...

請注意,這不是整個頁面,只是一個片段。 該代碼應驗證不同的標簽,但我不想使用html屬性。 它需要用JavaScript完成...

我的編碼哪里出錯了?

//To disable the radio buttons
function disableStuffNo(){
    //random comment to post
    document.getElementById("tele").disabled = false;
    document.getElementById("whatsapp").disabled = false;
    //random comment to post
    document.getElementById("call").disabled = false;
    document.getElementById("email").disabled = false;
}

 function disableStuffYes(){
    document.getElementById("tele").disabled = true;
     //random comment to post
    document.getElementById("whatsapp").disabled = true;
    document.getElementById("call").disabled = true;
    //random comment to post
    document.getElementById("email").disabled = true;
}

//To validate the form
function validateForm() {
    var a = document.forms["Order"]["Fname"].value;
    var b = document.forms["Order"]["Lname"].value;
    var c = document.forms["Order"]["topic"].value;

    if (a == ""||b == ""||c == "") {
    alert("Everything must be filled out");
    return false;
}      

HTML:

<form name="Order" style="margin-left: auto;margin-right: auto;display:block;" onsubmit="validateForm()">
    <fieldset>
        <!--random comment so i can post-->
        First Name: <input type="text" id="Fname" maxlength="40"<br/><br/>
        Last Name: <input type="text" id="Lname"  maxlength="40"><br/><br/>
        <!--random comment so i can post-->
        Occasion: <input type="text" id="topic"  max="50"><br/><br/>
        Gender:<br/>
        Female <input type="radio" id="female" name="gender" value="Female">
        <!--random comment so i can post-->
        Male <input type="radio" id="male" name="gender" value="Male"><br/>
        <!--random comment so i can post-->
        You do wish to schedule an appointment to discuss further? 
        Yes <input type="radio" id="yes" name="answer" value="Yes" checked onclick="disableStuffYes">
        <!--random comment so i can post-->
        No <input type="radio" id="no" name="answer" value="No"onclick="disableStuffNo;"><br/>
        Telephone Number: <input type="text" id="tele" maxlength="20" value="1(876)"><br/>
        Through:<br/>
        <!--random comment so i can post-->
        Whatsapp <input type="radio" id="whatsapp" name="choice" value="Whatsapp">
        Call <input type="radio" id="call" name="choice" value="Call">
         <!--random comment so i can post-->
        Email <input type="radio" id="email" name="choice" value="Email">
        <br/>
        <br/><br/>
    </fieldset>
    <fieldset>
        <!--random comment so i can post-->
        Please indicate the details of your request :)<br/>
        <textarea maxlength="1500" rows="20" cols="100">
        </textarea><br/>
         <!--random comment so i can post-->
        <input type="submit" value="Submit">
    </fieldset>
</form>

它實際上對我來說沒有任何問題。 我只要復制/粘貼代碼即可。 我建議的是以下內容:

1)在關閉body標簽之前,嘗試將javascript代碼直接包含在html中

<script>
//To validate the form
function validateForm() {
  var a = document.forms["Order"]["Fname"].value;
  var b = document.forms["Order"]["Lname"].value;
  var c = document.forms["Order"]["topic"].value;

  if (a == "" || b == "" || c == "") {
     alert("Everything must be filled out");
     return false;
  }  
 }
 </script>

2)如果有效,請檢查到您的外部javascript文件的鏈接是否正確。 您可以通過檢查Element並檢查控制台是否存在404錯誤(“找不到file.js”)來做到這一點。

因為它對我有用,所以我真的不認為這是代碼錯誤,並且可能會成為選項2。

這應該可以幫助您:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Firstname <input type="text" id="fname" maxlength="40"><br>
        Lastname <input type="text" id="lname" maxlength="40"><br>
        Topic <input type="text" id="topic" maxlength="50"><br>
        <button id="testbutton">Check form</button>

        <script>
            var isFormValid = function() {
                var a = document.getElementById("fname").value;
                var b = document.getElementById("lname").value;
                var c = document.getElementById("topic").value;

                if (a == "" || b == "" || c == "") {
                    alert("Something is missing");
                    return false;
                }
                return true;
            };

            var button = document.getElementById("testbutton");

            button.addEventListener("click", function() {
                if (isFormValid()) {
                    console.log("Form is valid");
                }
            });
        </script>
    </body>
</html>

暫無
暫無

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM