验证不适用于提交

Question

我创建了一个HTML表单，它采用了一些输入值，如下所示：

<form name="form1" action="" method="POST" onSubmit="return validate()">
    <div class="row">
        <div class="col-sm-3 form-group">
            <input type="text" id="shop_name" name="shop_name" placeholder="Shop Name" class="form-control">
        </div>
    </div>
    <div class="row"></div>

    <div class="row>
        <div class="col-sm-3 form-group">
        <input type="text" id="phn1" name="phn1" placeholder="Phone No.(Primary)" class="form-control">
    </div>

    <div class="col-sm-3 form-group">
        <input type="text" id="email" name="email" placeholder="E-Mail" class="form-control">
    </div>
    <center><button type="button" class="btn btn-lg btn-info">Submit</button></center>                  
    </div>
</form>

我在javascript中进行了一些验证，以验证商店名称，电话号码和电子邮件ID。

<script type="text/javascript">
     function validate()
   {
       var shop_name=document.form1.shop_name.value;
       var email=document.form1.email.value;
       var phn=document.form1.phn1.value;

       var phnre=/^[0-9]*$/;

       var emailre = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

       if(shop_name==='')
       {
           alert("Shop Name is required.");
           return false;
       }
       if(phn==="")
       {
           alert("Mobile number is required.");
           return false;

       }

       if(!phnre.test(phn))
       {
           alert("Invalid mobile number.");
           return false;

       }
       if(!emailre.test(email))
       {
           alert("Invalid Email Id.");
           return false;

       }

       return true;

   }
</script>

但是，它无法提交表单，

任何人都可以帮我解决这个问题。

Answer 1

首先，你的html有一些错误。这有效的主要原因是因为button type="button" type="submit"这应该是<form name="form1" action="" method="POST" onSubmit="return validate()"> <div class="row"> <div class="col-sm-3 form-group"> <input type="text" id="shop_name" name="shop_name" placeholder="Shop Name" class="form-control"> </div> </div> <div class="row"> <div class=" col-sm-3 form-group"> <input type="text" id="phn1" name="phn1" placeholder="Phone No.(Primary)" class="form-control"> </div> <div class="col-sm-3 form-group"> <input type="text" id="email" name="email" placeholder="E-Mail" class="form-control"> </div> <center> <button type="submit" class="btn btn-lg btn-info">Submit</button> </center> </div> </form> 。

总而言之，你的html应该是：

<center>

此外，HTML5不支持validate。

希望这有帮助！

Answer 2

请使用提交而不是按钮。

replace 
<button type="button" class="btn btn-lg btn-info">Submit</button>
with
<input type="submit" class="btn btn-lg btn-info" value="submit">  

Answer 3

更改按钮以输入提交。

function validate()
{
	var shop_name=document.form1.shop_name.value;// better use like var shop_name=document.getElementById("shop_name").value
    var email=document.form1.email.value;
    var phn=document.form1.phn1.value;

    var phnre=/^[0-9]*$/;

    var emailre = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if(shop_name==='')
    {
        alert("Shop Name is required.");
        return false;
    }
    if(phn==="")
    {
        alert("Mobile number is required.");
        return false;

    }

    if(!phnre.test(phn))
    {
        alert("Invalid mobile number.");
        return false;

    }
    if(!emailre.test(email))
    {
        alert("Invalid Email Id.");
        return false;

    }

    return true;

}

<form name="form1" action="" method="POST" onSubmit="return validate();">
<div class="row">
<div class="col-sm-3 form-group">
<input type="text" id="shop_name" name="shop_name" placeholder="Shop Name" class="form-control">
</div>
</div>
<div class="row"></div>

<div class="row>
<div class="col-sm-3 form-group">
<input type="text" id="phn1" name="phn1" placeholder="Phone No.(Primary)" class="form-control">
</div>

<div class="col-sm-3 form-group">
<input type="text" id="email" name="email" placeholder="E-Mail" class="form-control">
</div>
<center><button type="submit" class="btn btn-lg btn-info">Submit</button></center>                  
</div>
</form>

Answer 4

您应该以另一种方式阅读价值：

var shop_name=document.getElementById("shop_name").value;
var email=document.getElementById("email").value;
var phn=document.getElementById("phn1").value;

另外在9行上你错过了＆＃34; row 之后的quoata 按钮应该是＆＃34;提交＆＃34;：

<button type="submit" class="btn btn-lg btn-info">Submit</button>

Answer 5

只需替换输入类型=＆＃34;按钮＆＃34;输入type =＆＃34;提交＆＃34;

<button type="submit" class="btn btn-lg btn-info">Submit</button>

尝试整个代码应该是这样的

<script type="text/javascript">
     function validate(){             

       if(document.form1.shop_name.value == ""){
       alert("Shop Name is required.");
        return false;
       }   

        var emailID=document.form1.email;  
        if ((emailID.value==null)||(emailID.value==""))
        {
            alert("Please Enter your Email ID")
            emailID.focus()
            return false;
        } 
        var chk;
        chk = echeck(emailID.value);
        if(chk == "wrong")
        {
            emailID.value=""
            emailID.focus()
            return false;
        }

        function echeck(str) 
    {

        var at="@"

        var dot="."

        var lat=str.indexOf(at)

        var lstr=str.length

        var ldot=str.indexOf(dot)

        if (str.indexOf(at)==-1)

        {

            alert("Invalid E-mail ID")

            return "wrong";

        }
        if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){

           alert("Invalid E-mail ID")

           return "wrong";

        }
        if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){

            alert("Invalid E-mail ID")

            return "wrong";

        }
         if (str.indexOf(at,(lat+1))!=-1)
         {
            alert("Invalid E-mail ID")
            return "wrong";
         }
         if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
         {
            alert("Invalid E-mail ID")
            return "wrong";
         }
         if (str.indexOf(dot,(lat+2))==-1)
         {
            alert("Invalid E-mail ID")
            return "wrong";
         }
         if (str.indexOf(" ")!=-1)
         {
            alert("Invalid E-mail ID")
            return "wrong";
         }
         return "correct";                    
    }



       if(document.form1.phn1.value == ""){
        alert("Please provide phone ");
        return false;
       }   

        return true;
    }

            </script>



    <form name="form1" action="abc.php" method="POST" onSubmit="return validate()">
    <div class="row">
    <div class="col-sm-3 form-group">
    <input type="text" id="shop_name" name="shop_name" placeholder="Shop Name" class="form-control">
    </div>
    </div>
    <div class="row"></div>


    <div class="row>
    <div class="col-sm-3 form-group">
    <input type="text" id="phn1" name="phn1" placeholder="Phone No.(Primary)" class="form-control">
    </div>

    <div class="col-sm-3 form-group">
    <input type="text" id="email" name="email" placeholder="E-Mail" class="form-control">
    </div>
    <center><button type="submit" class="btn btn-lg btn-info">Submit</button></center>                  
    </div>
    </form>

谢谢...

Answer 6

我不知道你是如何将这个脚本引用到你的HTML中的，但我希望你把它放在一个关于HTML本身的未知位置，这里有三种工作方式： -

三种方式中的共同点：

    <button type="submit" class="btn btn-lg btn-info">

而不是

   <button type="button" class="btn btn-lg btn-info">

如同小提琴

1. 将验证函数定义放在window对象中：

   window.validate = function(){.......};
   

   Fiddle Here

2. 将脚本嵌入HTML本身：

   <form></form>
   <script>your validate function definition</script>        
   

   Fiddle Here

3. 将脚本放在外部文件中并在HTML文件中引用它（推荐）