Question

这段代码是否正确？我想要提交＆＃39;验证字段（以确保输入值），如果这是正确的（有一个值），则淡出并显示。

目前，即使没有输入值，表格也会消失？我觉得我在这里错过了一些非常简单的东西！

<!DOCTYPE html>
<html>
     <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <link rel='stylesheet' type='text/css' href='styles.css' />
        <meta charset="utf-8"-->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            function validateForm()
                 {
                  var x=document.forms["myForm"]["fname"].value;
                  if (x==null || x=="")
                    {
                        alert("First name must be filled out");
                        return false;
                    }
                 }
       </script>
   </head>



<body>
   <div id="sidebarf">
     <form id="sidebarform"  name="myForm" onsubmit="return validateForm()" method="post">
       <input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
       <input type="submit" id="sidebarformsubmit" value="Submit">
     </form> 
   </div>
  <script>
    $("#sidebarformsubmit").click( function(){
    $("#sidebarform").fadeOut("slow", function(){
      $("#sidebarf").html("hello " + $("#sidebarusername").val() )
        });
      });
  </script>

</body>
</html>

Answer 1

根据您对其他答案的评论，您不关心这是否真的提交，因此您可以执行以下操作：

HTML：

<div id="sidebarf">
 <form id="sidebarform" name="myForm" method="post">
     <input type="text" id="sidebarusername" name="fname" placeholder="Name" />
       <input type="submit" id="sidebarformsubmit" value="Submit" />
 </form>

JS：

$(document).ready(function() {

$('#sidebarform').on('submit', function() {
    if ($('#sidebarusername').val() == '') {
        alert('First name must be filled out');
        return false;
    }

    $("#sidebarform").fadeOut("slow", function(){
          $("#sidebarf").html("hello " + $("#sidebarusername").val() );
    });

    return false;
});

}）;

工作示例： http://jsfiddle.net/3z5x8/

Answer 2

您的验证与提交事件绑定。点击事件将始终满满。

将处理程序绑定到提交事件

$("#sidebarformsubmit").submit( function(){.....

除非您使用ajax提交，否则表单会导致页面刷新，这意味着您的淡入淡出并显示新的HTML无法正常工作

为什么表单淡入功能不允许验证？

2 个答案: