Question

我想在单击按钮时检查正则表达式验证。当提交按钮类型时，它工作正常，但它不会重定向到我已链接按钮的另一个页面 - 但是当我将其类型更改为按钮时，它会正常重定向到另一个页面，而不会检查正则表达式验证。我还在检查是否所有输入字段都已填充，并聚焦任何空字段。但我想这些代码有问题。

Demo

HTML CODE：

<form action="" method="POST" role="form" class="payment_form">
    <div class="contact_details">
        <div class="payment_details">
            <div class="form-group">
                <input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName"  placeholder="FULL NAME" required/>
            </div>
            <div class="form-group">
                 <input type="email" class="input_name" id="email" title="Eg: some@mail.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
            </div>
            <div class="form-group">
                <input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
            </div>
        </div>
    </div>  
    <a href="thankyou.html" title=""><button type="submit" class="btn btn-primary pay_btn" >Continue</button></a>   
 </form>

JS：

$('.pay_btn').click(function(e){
   $(":input").each(function() {
      if($(this).val() === "")
      $(this).css('border-color', '#ff0000');
   });
});

Answer 1

你必须从提交按钮中删除锚标记，并在操作中写下html页面的名称，当表格正确字段时，这将适用于页面重定向。对于一个字段焦点，你必须改变逻辑输出那里。

Answer 2

@Preety Angel，在表格标签action的{{1}}属性中提供html文件名，如下所示，

<form action="thankyou.html">

Answer 3

我想在单击按钮时检查正则表达式验证。它工作正常，当按钮类型提交但它没有重定向到我已链接按钮的另一个页面，

这里发生的是，您点击了提交类型的按钮，此按钮将尝试提交表单。所以your validation will work on form submit。由于您没有在表单的action=""属性中提及任何网址，因此您的网页无法知道该去哪里。因此解决方案将网址添加到此action属性

中

<form action="thankyou.html" method="POST" role="form" class="payment_form">

但是当我将按钮类型更改为按钮时，它会正常重定向到其他页面，而不会检查正则表达式验证。

原因是once you remove the button type submit it has nothing to do with the form anymore。它只是一个简单的按钮。但是您已将此按钮包含在具有href集的锚标记内。因此，通过单击链接，这与页面重定向一样好，因此表单根本没有提交。因此，您的验证保持安静。因为它仅在提交表单时有效。

检查提交时的正则表达式验证，如果为空，则将所有输入字段集中

3 个答案: