-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のです：私はあなたのために働いてDEMO行った
(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);
'enctype'を削除して、動作するか試してみてください。 –
それを解決しなかった – Learner
'fiddle'を作成できますか？ –