2016-12-25 3 views
-1

Ich schrieb ein einfaches PHP-Formular und validiere es mit jQuery. Überraschenderweise funktioniert die Validierung korrekt in IE-Version "11.0.9600.18163" Aber in Chrome-Version "55.0.2883.87" funktioniert es nicht. Das bedeutet, dass das Formular ohne Werte übergeben werden kann.jQuery arbeitet in IE, aber nicht in Chrome

PHP-Seite:

<!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 ist:

(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); 
+0

Versuchen Sie, den 'enctype' zu ​​entfernen, um zu sehen, ob es funktioniert. –

+0

hat es nicht gelöst – Learner

+0

Kannst du eine 'Geige' kreieren? –

Antwort

0

ich eine Arbeits DEMO für Sie gemacht haben.

Sie hatten einige Probleme in Ihrem Code, die nicht mit dem von Ihnen verwendeten Browsertyp zusammenhängen.
Es gab ein paar redundante , und es war eine Mischung mit { über das Dokument bereit.

Das von Ihnen verwendete Plugin ist Jquery validate.
Viel Glück.

+0

Danke, ich habe meine Lektion gelernt. Ich denke jedoch, mein Fehler war das Laden von zwei verschiedenen jQuery-Versionen. – Learner

Verwandte Themen