javascript中的表单验证(事件处理)

时间:2014-01-19 11:02:23

标签: javascript html event-handling

我已经在html中创建了一个表单,我将使用JavaScript验证它。第一个名字和父亲的名字不应该超过20个字符,所以我已经对它们进行了检查,但它们正在运行。这是我的代码

<html>
    <head>
        <script type="text/javascript">
        function validate()
        {
            var firstName=document.f1.firname.value;
            var fatherName=document.f1.fname.value;
            var address=document.f1.add.value;
            var phoneNumber=document.f1.ph.value;
            var cnic=document.f1.cnic.value;
            var email=document.f1.email.value;
            var cgpa=document.f1.fname.value;
            var sem=document.f1.sem.value;
            var id=document.f1.cid.value;
            if(firstName.length>20)
            {
                alert("Value can't exceed 20");
            }
            if(fatherName.length>20)
            {
                alert("Value can't exceed 20");
            }
        }
        </script>
    </head>
    <body>
    <form name="f1">
        Name : <input type="text",name="firname">  <br>
        Father's Name: <input type="text",name="fname"> <br>
        Address: <input type="text",name="add"> <br>
        Phone No.:<input type="text",name="ph"> <br>
        CNIC:<input type="text",name="cnic"> <br>
        Email:<input type="text",name="email"> <br>
        City :<br> <input type="radio" name="city" value="lhr"> Lahore <br>
        <input type="radio" name="city" value="karachi"> Karachi <br>
        <input type="radio" name="city" value="isl"> Islamabad <br>
        <select name="country">
            <option value="pakistan">Pakistan</option>
            <option value="india">India</option>
            <option value="china">China</option>
        </select> <br>
        Cgpa:<input type="text",name="cgpa"> <br>
        Department:<input type="text",name="dpt"> <br>
        <select name="degree">
            <option value="se">SE</option>
            <option value="cs">CS</option>
            <option value="it">IT</option>
        </select> <br>
        Semester:<input type="text",name="sem"> <br>
        CollegeId:<input type="text",name="cid"> <br>
        <input type="Submit", value="Submit" ,onsubmit="validate()">
    </form>
    </body>

似乎是什么问题?       

1 个答案:

答案 0 :(得分:1)

请勿使用逗号分隔HTML属性。它应该是:

Name : <input type="text" name="firname">  <br>

而不是:

Name : <input type="text",name="firname">  <br>

onsubmit事件应该是表单,而不是input按钮。

<form name="f1" onsubmit="validate()">