Question

我写了一个简单的php表单并使用jQuery进行验证。令人惊讶的是，验证在IE版“11.0.9600.18163”中正常工作但在Chrome版本“55.0.2883.87”中它不起作用。这意味着表单可以在没有值的情况下提交。

PHP页面：

<!DOCTYPE HTML>
<html>
<head>
<title>Event Certificate System</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="enStyle.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- jQuery Validation Plugin 
hosted by Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="addEvent-validation.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
</head>
<body>
<div id="wrapper">
  <div id="header"><img id="all" src="img/enHeader.png" alt="Event Certificate System"/></div>
  <nav id="primary_nav_wrap">
    <ul>
      <li class="current-menu-item"><a href="index.php"><span>Home</span></a></li>
      <li class="current"><a href="AddEvent.php"><span>Add Event</span></a></li>
      <li class="current-menu-item"><a href="addAttendance.php"><span>Add Attendance</span></a></li>
      <li class="cust"><a href="sendCertificate.php"><span>Send Certificate</span></a></li>
    </ul>
  </nav>
  <br>
  <div id="content">
    <h3 class="custom">Add Event Form</h3>
    <form action="addEvent.php" method="post" enctype="multipart/form-data" id="addEvent-form" novalidate>
      <div class="formLayout">
        <div class="required">
          <label>Event Title</label>
          <input type="text" name="etitle" dir="ltr"/>
        </div>
        <br>
        <div class="required">
          <label>Event Date</label>
          <input type="text" name="edate" id="datepicker">
        </div>
        <br>
        <input type="submit" name="add" value="Add" class="styled_button"/>
      </div>
    </form>
  </div>
  <div id="footer"> <img id="bottom" src="img/footer.png" alt="Event Certificate System"/> </div>
</div>
</body>
</html>

jQuery是：

(function($,W,D)
{
    var JQUERY4U = {};
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
    $("#addEvent-form").validate({
        errorElement: 'div',
        rules: {
            etitle: 
            {
            required: true,
            },
            edate:
            {
            required: true,
            },
        },
        messages: {
            etitle: 
            {
            required: "Enter Event Title",
            },
            edate:
            {
            required: "Enter Event Date",
            },
        },

        submitHandler: function(form) {
            form.submit();
                }
            });
}}
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
})(jQuery, window, document);

Answer 1

我为你做了一个有效的 DEMO 。

您的代码中存在一些与您使用的浏览器类型无关的问题有一些冗余的,，并且文件准备就绪了{。

您使用的插件是 Jquery validate 。祝你好运。

jQuery正在IE中工作但不在Chrome中

1 个答案: