Question

在Google上搜索后，我无法找到正确的代码解决方案。在这里，我将JQuery与ajax谷歌库链接以进行HTML FORM验证。表单成功提交后，它工作正常，但没有刷新。请指导我。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function Submit(){
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
    var formemail = $("#femail").val();
    var name = $("#name").val();
        var name = $("#place").val();
    var femail = $("#femail").val();

        if($("#name").val() == "" ){
            $("#name").focus();
            $("#error").html("Enter the Name.");
            return false;
        }else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }else if($("#femail").val() == "" ){
                $("#femail").focus();
                $("#error").html("Enter the email.");
                return false;
        }else if(!emailRegex.test(formemail)){
                $("#femail").focus();
                $("#error").html("Enter the valid email.");
                return false;
        }else if($(name != '' && place != '' && femail != '')){
            $("#error").html("Form submitted successfully.")
                }
         }
</script>

<form id="form_name" name="form" method="post" action="   ">
   <div id="error"></div>
       NAME:  <input type="text" name="Name"  id="name" > <br>
       PLACE:  <input type="text" name="Place" id="place"> <br>
       EMAIL:  <input type="text" name="Email" id="femail"> <br><br> 
       <input type="button" id="submit" value="Submit" onClick="Submit()"/>
</form>

提交HTML表单后，会显示“表单已成功提交”，然后显示要刷新的表单。

Answer 1

拥有type = 'button'，它不会充当submit-button

使用type = "submit"
如果客户端验证失败，请使用event.preventdefault()来阻止表单提交

＆＃13;

function Submit(e) {
  var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
  var formemail = $("#femail").val();
  var name = $("#name").val();
  var name = $("#place").val();
  var femail = $("#femail").val();

  if ($("#name").val() == "") {
    $("#name").focus();
    $("#error").html("Enter the Name.");
    e.preventDefault();
  } else if ($("#place").val() == "") {
    $("#place").focus();
    $("#error").html("Enter the Place.");
    e.preventDefault();
  } else if ($("#femail").val() == "") {
    $("#femail").focus();
    $("#error").html("Enter the email.");
    e.preventDefault();
  } else if (!emailRegex.test(formemail)) {
    $("#femail").focus();
    $("#error").html("Enter the valid email.");
    e.preventDefault();
  } else if ($(name != '' && place != '' && femail != '')) {
    $("#error").html("Form submitted successfully.")
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="form_name" name="form" method="post" action="   ">
  <div id="error"></div>
  NAME:
  <input type="text" name="Name" id="name">
  <br>PLACE:
  <input type="text" name="Place" id="place">
  <br>EMAIL:
  <input type="text" name="Email" id="femail">
  <br>
  <br>
  <input type="submit" id="submit" value="Submit" onClick="Submit(event)" />
</form>

＆＃13;

Answer 2

使用以下功能......

location.reload(true);

window.location.reload()

window.location.href=window.location.href

Answer 3

除了Rayon建议的更改之外，您可以将$("#form_name")[0].reset()放在$("#error").html("Form submitted successfully.")下面来刷新表单：

function Submit(e){
    e.preventDefault();
    // You will have to submit your form using ajax.
    var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
    var formemail = $("#femail").val();
    var name = $("#name").val();
        var name = $("#place").val();
    var femail = $("#femail").val();

        if($("#name").val() == "" ){
            $("#name").focus();
            $("#error").html("Enter the Name.");
            return false;
        }else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }else if($("#femail").val() == "" ){
                $("#femail").focus();
                $("#error").html("Enter the email.");
                return false;
        }else if(!emailRegex.test(formemail)){
                $("#femail").focus();
                $("#error").html("Enter the valid email.");
                return false;
        }else if($(name != '' && place != '' && femail != '')){
            $("#error").html("Form submitted successfully.")
            $("#form_name")[0].reset();
         }
     }

但是，如果您没有使用ajax提交表单，那么您的页面将被重新加载，从而无法显示成功提交的表单＆＃34;消息。

Answer 4

您应该在程序中执行以下两个步骤

需要提供表格名称使用以下

＆LT; form id =＆＃34; form_name＆＃34;命名=＆＃34;形式＆＃34;方法=＆＃34;后＆＃34;行动=＆＃34; ＆＃34;＆GT;

而不是上线u

<强>＆LT;表格名称=＆＃34;表格＆＃34; ID =＆＃34; FORM_NAME＆＃34;命名=＆＃34;形式＆＃34;方法=＆＃34;后＆＃34;行动=＆＃34; ＆＃34; ＆GT;

2.在脚本中添加行＆＃34;提交＆＃34;

<强> document.form.reset（）;

//此处＆＃34;表单＆＃34; 是表单的名称

刷新表单提交无效

4 个答案: