Have I accidentally disabled JQuery?
Strictly speaking, I'm not really new to JQuery but it's been several years since I first used it so I certainly *feel* like a noob because I'm very rusty.
I wrote some forms with JQuery validation several years back and then basically never looked at it again; I've forgotten a lot. I'm back to these forms adding a new feature and find myself wondering why none of my JQuery validations seem to be executing at all. When I try pressing submit on an otherwise untouched form, I get my PHP validation errors but not a peep from JQuery. I thought perhaps I had javascript disabled in the browser which should, if memory serves, turn off JQuery too but javascript is on.
Have I accidentally disabled JQuery somehow? Here is the relevant code, starting with topicProposalThemeForm.php:
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Meeting Topic Proposal - Theme</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#topicProposalTheme").validate({
errorContainer: "#errorbox",
errorLabelContainer: "#errorbox ul",
wrapper: "li",
rules: {
proposer: {
required: true,
minlength: 2
},
title: {
required: true,
minlength: 2
},
discuss: {
required: true,
minlength: 2,
maxlength: 2000
},
prepare: {
required: true,
minlength: 2,
maxlength: 2000
},
comments: {
required: false,
maxlength: 2000
}
submit: {
required: function(element){ //if all checkboxes are unchecked, advise user to check at least one checkbox
if ($('#cmeeting1').is(':unchecked') &&
$('#cmeeting2').is(':unchecked') &&
$('#cmeeting3').is(':unchecked') &&
$('#cmeeting4').is(':unchecked') &&
$('#cmeeting5').is(':unchecked') &&
$('#cmeeting6').is(':unchecked')) {
return true;
}
else {
return false;
}
}
},
messages: {
proposer: {
required: "Please identify yourself, e.g. Doug B",
minlength: jQuery.format("Your name must be at least {0} characters long.")
},
title: {
required: "Please identify the topic, e.g. The future of genetic engineering.",
minlength: jQuery.format("The topic must be at least {0} characters long.")
},
discuss: {
required: "Please identify what will be discussed during the meeting, e.g. How human beings are likely to change physically and emotionally given advances in genetic engineering.",
minlength: jQuery.format("The description must be at least {0} characters long."),
maxlength: jQuery.format("The description must not exceed {0} characters.")
},
prepare: {
required: "Please identify what members will need to do to prepare for the meeting, e.g. Read the Wikipedia article on genetic engineering and the novel Holy Fire by Bruce Sterling.",
minlength: jQuery.format("The actions needed to prepare for the meeting must be at least {0} characters long."),
maxlength: jQuery.format("The actions needed to prepare for the meeting must not exceed {0} characters long")
},
comments: {
maxlength: jQuery.format("The comments must not exceed {0} characters.")
},
submit: {
required: "At least one of the meeting checkboxes must be checked."
}
}
});
});
</script>
<style type="text/css">
label.error { float: none; color: red; background-color: yellow; padding-left: .5em; vertical-align: top; font-weight:bold}
</style>
<?php include('fragments/_getThemes.php'); ?>
</head>
<body>
<h1>Meeting Topic Proposal - Theme</h1>
<form class="proposal" id="topicProposalTheme" method="post" action="topicProposalTheme.php">
<p>Use this form to make a suggestion for a future meeting topic. Complete the form and press the Submit button. To clear the form without submitting it, press the Reset button.</p>
<div id="errorbox"><ul></ul></div>
<p>Topic proposal submitted by (e.g. Doug B.): <input type="text" name="proposer" id="cproposer" size="30" maxlength="30"/></p>
<p><input type="checkbox" name="meetings" id="cmeetings" value="Meetings">Have you attended at least three full meetings of Science Fiction London?</p>
<fieldset><legend>Proposed Topic</legend>
<p>Title (e.g. The future of Genetic Engineering): <input type="text" name="title" id="ctitle" size="50" maxlength="50"/></p>
</fieldset>
<p></p>
<p>What will we discuss? (e.g. How human beings will change physically and emotionally if genetic engineering proceeds.)</p>
<p><textarea name="discuss" id="cdiscuss" rows="10" cols="50" maxlength="2000"></textarea></p>
<p>What, if anything, do we have to do to prepare for the meeting? (e.g. Read a Wikipedia article on genetic engineering and any novel in which genetic engineering is a key plot element.)</p>
<p><textarea name="prepare" id="cprepare" rows="10" cols="50" maxlength="2000"></textarea></p>
<p><input type="checkbox" name="related" id="crelated" value="Related">There is a related topic that should be presented at the same meeting.</p>
<p>Additional Comments (e.g. It would be helpful if you could prepare a list of genetic enhancements that you would like to have.):</p>
<p><textarea name="comments" id="ccomments" rows="10" cols="50" maxlength="2000"></textarea></p>
<?php
$debug = 0;
require("utilities.php");
require("fragments/%SFL_Functions.php");
$now = new DateTime();
if ($debug >= 1) echo (is_a($now, 'DateTime')) ? ('Real $now is a DateTime <br>') : ('Real $now is not a DateTime <br>');
if ($debug) echo 'Current date is ' . $now->format('Y-m-d') . '<br>';
$nextFewMeetingsString = Determine_Meeting_Dates($now);
echo "<p>If this topic is chosen, the presenter(s) can present the topic on the following dates:\n";
echo "<ul style='list-style: none;'>\n";
$meetingNumber = 1;
foreach ($nextFewMeetingsString as &$oneMeetingDate) {
$dateHuman = new DateTime($oneMeetingDate);
echo "<li><input type='checkbox' name='meeting" . $meetingNumber . "' value='" . $oneMeetingDate . "' id='cmeeting" . $meetingNumber . "'> " . $dateHuman->format("l, M d, Y") ."</li>\n";
$meetingNumber++;
}
echo "</ul>\n";
?>
<p>
<input type="hidden" name="_submit_check" value="1"/>
<input name="submitForm" id="submitForm" type="submit" value="Submit"/>
<input name="reset" id="reset" type="reset" value="Reset"/>
</p>
</form>
</body>
</html>
I had planned to insert most of the supporting code but got an error about "maximum content exceeded". Unfortunately, it doesn't say what the maximum is or how much I've used so I'll let you ask me if you need more.
I've been pretty careful with my changes and I can't see anything that looks like it would break JQuery so I'm really not sure what I've done wrong. If anyone can enlighten me, that would be great!