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

-1

我写了一个简单的php表单，并使用jQuery对其进行验证。令人惊讶的验证在IE版本“11.0.9600.18163” 中正常工作，但在Chrome版本“55.0.2883.87”不起作用。意思是表单可以不带任何值提交。jQuery在IE中工作，但不在Chrome中

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);

来源

2016-12-25 Learner

尝试删除'enctype'来查看它是否有效。 –

它没有解决它 – Learner

你可以创建一个'小提琴'？ –

我已经做了工作DEMO你。

您的代码中存在一些与您使用的浏览器类型无关的问题。
有一些冗余,，并且在文档准备好的情况下与{混合。

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

来源

2016-12-26 10:02:40

谢谢我学到了我的教训。不过，我认为我的错误是加载两个不同的jQuery库版本。 – Learner

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

回答

相关问题