我有一段非常复杂的javascript，我遇到了一些困难。我写了一个测验/调查创建页面。用户在这个巨大的表格中输入信息，他们基本上是在为其他用户创建一个测验。
但是，我遇到了验证问题。该页面的工作方式是，用户将填写第一组表单字段，然后如果他们决定添加另一个测验问题，则会评估前一组必填字段并为任何未完成的项目发出警报。
他们最多可以创建 15 个问题，并在每个问题部分的末尾进行验证。当用户的问题数量达到最大值时，最终问题字段的验证会使用在提交时运行的脚本进行。
运行最终问题验证时，我收到一个错误，我有一个未捕获的引用错误。但是，该错误对我来说毫无意义，因为评估表单的方式 - 我正在调用函数并将表单 ID 输入脚本。因此，本质上，每个问题评估脚本调用都使用相同的函数，但是只有当我遇到最后一个问题时才会遇到问题。
以下是普通测验问题表单字段部分的设置方式：
<tr class="Q-13" id="Q-13" style="display: none;">
<td>
<fieldset>
<label for="CAT_Custom_185">Question 13 Text*</label>
<br />
<textarea name="CAT_Custom_185" id="CAT_Custom_185" cols="10" rows="4" class="cat_listbox" onblur="replace_quotes('CAT_Custom_185');" onkeydown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);"></textarea>
<br />
<div class="S-13" id="S-13" style="display: none;">
<div class="row" style="margin-bottom: 1rem;">
<p style="margin: 0rem 0rem 0.35rem 1rem;"><label>Please select an answer type.*</label></p>
<div class="small-6 columns">
<input type="radio" name="CAT_Custom_242" id="CAT_Custom_242_0" value="Ratings (1-10)" /> Ratings (1-10)</div>
<div class="small-6 columns">
<input type="radio" name="CAT_Custom_242" id="CAT_Custom_242_1" value="Short Answer (Text box)" /> Short Answer (Text box)</div>
</div>
</div>
<div class="Quiz-13" id="Quiz-13" style="display: none;">
<label>Answer Type:*</label>
<select name="CAT_Custom_186" id="CAT_Custom_186" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="True/False">True/False</option>
<option value="Multiple Choice">Multiple Choice</option>
</select>
<div class="quiz_TF13" id="quiz_TF13" style="display: none;">
<label>Please select the circle to the left to mark the correct answer.*</label>
<table width="100%" border="0" class="quiz_truefalse">
<tbody>
<tr>
<td style="width: 100%; padding-bottom: 1rem;">
<input type="radio" name="CAT_Custom_187" id="CAT_Custom_187_0" value="True" /> True</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_188" id="CAT_Custom_188" class="cat_textbox" value="True" style="display: none;" />
</td>
</tr>
<tr>
<td style="width: 100%; padding-bottom: 1rem;">
<input type="radio" name="CAT_Custom_187" id="CAT_Custom_187_1" value="False" /> False</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_189" id="CAT_Custom_189" class="cat_textbox" value="False" style="display: none;" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="quiz_Multichoice13" id="quiz_Multichoice13" style="display: none;">
<label>Please fill in your answers and select the circle to the left to mark the correct answer. <span style="font-weight: bold;">Please make sure to create an answer for each of the four fields.*</span></label>
<table width="100%" border="0" class="quiz_multichoice">
<tbody>
<tr>
<td style="width: 14%;">
<div class="q-radio">
<input type="radio" name="CAT_Custom_190" id="CAT_Custom_190_0" value="A" /> A</div>
</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_191" id="CAT_Custom_191" class="cat_textbox" placeholder="Answer A" />
</td>
</tr>
<tr>
<td style="width: 14%;">
<div class="q-radio">
<input type="radio" name="CAT_Custom_190" id="CAT_Custom_190_1" value="B" /> B</div>
</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_192" id="CAT_Custom_192" class="cat_textbox" placeholder="Answer B" />
</td>
</tr>
<tr>
<td style="width: 14%;">
<div class="q-radio">
<input type="radio" name="CAT_Custom_190" id="CAT_Custom_190_2" value="C" /> C</div>
</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_193" id="CAT_Custom_193" class="cat_textbox" placeholder="Answer C" />
</td>
</tr>
<tr>
<td style="width: 14%;">
<div class="q-radio">
<input type="radio" name="CAT_Custom_190" id="CAT_Custom_190_3" value="D" /> D</div>
</td>
<td style="width: 91%;">
<input type="text" maxlength="4000" name="CAT_Custom_194" id="CAT_Custom_194" class="cat_textbox" placeholder="Answer D" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<label>Would you like to add a visual reference to this question?*</label>
<select name="CAT_Custom_195" id="CAT_Custom_195" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Youtube Video">Youtube Video</option>
<option value="Vimeo Video">Vimeo Video</option>
<option value="Image">Image</option>
<option value="No">No</option>
</select>
<div class="Q13-Vimeo" id="Q13-Vimeo" style="display: none;">
<label>Please insert the the Vimeo Video Code for your reference video:* <span id="vimeo-vid-helper" style="font-size: 0.8rem;"><a href="/images/vimeo_help.png" target="popup" onclick="window.open('/images/vimeo_help.png','name','width=900,height=515')">What is this?</a></span></label>
<input type="text" maxlength="4000" name="CAT_Custom_196" id="CAT_Custom_196" class="cat_textbox" />
</div>
<div class="Q13-Youtube" id="Q13-Youtube" style="display: none;">
<label>Please insert the the Youtube Video Code for your reference video:* <span id="youtube-vid-helper" style="font-size: 0.8rem;"><a href="/images/you_tube_help.png" target="popup" onclick="window.open('/images/you_tube_help.png','name','width=900,height=500')">What is this?</a></span></label>
<input type="text" maxlength="4000" name="CAT_Custom_197" id="CAT_Custom_197" class="cat_textbox" />
</div>
<div class="Q13-Image" id="Q13-Image" style="display: none;">
<label>Please upload your image:</label>
<input type="file" name="CAT_Custom_198" id="CAT_Custom_198" class="cat_textbox" />
</div>
<br />
<label for="CAT_Custom_199">Would you like to add another question?*</label>
<select name="CAT_Custom_199" id="CAT_Custom_199" class="cat_dropdown" onclick="questionValidate(CAT_Custom_185, CAT_Custom_186, CAT_Custom_187, CAT_Custom_190, CAT_Custom_191, CAT_Custom_192, CAT_Custom_193, CAT_Custom_194, CAT_Custom_195, CAT_Custom_196, CAT_Custom_197, CAT_Custom_198, CAT_Custom_242);">
<option value=" ">-- Please select --</option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</fieldset>
</td>
</tr>
如您所见，每个问题都有几个字段。当用户选择下拉菜单“您想添加另一个问题”时，表单验证脚本 questionValidate() 将使用作为变量输入的相关字段 ID 运行。
这是极其复杂的验证脚本：
var questionValidate = function(qTextID, qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4, VisRef, Vimeo, Youtube, ImgID, sAnswers1) {
if (document.getElementById('ItemName').value == "") {
var quizName = true;
};
if (document.getElementById('CAT_Custom_251').value == "") {
var qshortDesc = true;
};
if (jQuery('select[name="CAT_Custom_14"]').val() == 'Quiz') {
if (jQuery(qTextID).val() == "") {
var qText = true;
};
if (jQuery('select[name="CAT_Custom_249"]').val() == " ") {
var quizscore1 = true;
};
if (jQuery(qAnswerType).val() == " ") {
var answertype = true;
} else if (jQuery(qAnswerType).val() == 'True/False') {
if (!jQuery(TFID + '_0').is(':checked') || !jQuery(TFID + '_1').is(':checked')) {
var tfanswer = true;
var mcanswer = false;
};
} else if (jQuery(qAnswerType).val() == 'Multiple Choice') {
if (!jQuery(MCID).is(':checked')) {
var mcanswer = true;
var tfanswer = false;
if (jQuery(MCText1).val() != "" || jQuery(MCText2).val() != "" || jQuery(MCText3).val() != "" || jQuery(MCText4).val() != "") {
var mcTextfields = false;
} else {
mcTextfields = true;
};
} else {
if (jQuery(MCText1).val() != "" || jQuery(MCText2).val() != "" || jQuery(MCText3).val() != "" || jQuery(MCText4).val() != "") {
var mcTextfields = false;
} else {
mcTextfields = true;
};
};
};
if (jQuery(VisRef).val() != " ") {
if (jQuery(VisRef).val() == "Youtube Video" && jQuery(Youtube).val() == "") {
var youtubeVal = true;
} else if (jQuery(VisRef).val() == "Vimeo Video" && jQuery(Vimeo).val() == "") {
var vimeoVal = true;
} else {
youtubeVal = false;
vimeoVal = false;
var tempImgCheck = false;
var validateImage = function(imgID) {
var imgName = jQuery(imgID).val();
var extension = imgName.split('.').pop().toUpperCase();
if (imgName.length < 1) {
imgok = 0;
} else if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") {
imgok = 0;
alert("You are using an invalid filetype. Please upload a different image or file type.");
} else {
imgok = 1;
};
if (imgok == 1) {
tempImgCheck = true;
} else {
tempImgCheck = false;
};
};
};
};
} else if (jQuery('select[name="CAT_Custom_14"]').val() == 'Survey') {
if (jQuery(qTextID).val() == "") {
var qText = true;
};
if (!jQuery(sAnswers1).is(':checked')) {
var surveyAnswers1 = true;
} else {
surveyAnswers1 = false;
};
};
if (jQuery(VisRef).val() != " ") {
if (jQuery(VisRef).val() == "Youtube Video" && jQuery(Youtube).val() == "") {
var youtubeVal = true;
} else if (jQuery(VisRef).val() == "Vimeo Video" && jQuery(Vimeo).val() == "") {
var vimeoVal = true;
} else {
youtubeVal = false;
vimeoVal = false;
var tempImgCheck = false;
var validateImage = function(imgID) {
var imgName = jQuery(imgID).val();
var extension = imgName.split('.').pop().toUpperCase();
if (imgName.length < 1) {
imgok = 0;
} else if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") {
imgok = 0;
alert("You are using an invalid filetype. Please upload a different image or file type.");
} else {
imgok = 1;
};
if (imgok == 1) {
tempImgCheck = true;
} else {
tempImgCheck = false;
};
};
};
};
if (qCountNum == 15) {
qCountNum = 16;
};
var qName = "- Quiz or Survey Name\n";
var shortDescription = "- A short description of the Quiz/Survey\n";
var scoreMessage = "- A required passing quiz score\n";
var QTextMessage = "- Question text\n";
var answerTMessage = "- An answer type\n";
var mcFields = "- The Multiple Choice answer fields\n";
var mcMessage = "- The correct Multiple Choice Answer\n"
var tfMessage = "- The correct True/False answer\n";
var vimMessage = "- A Vimeo Video code\n";
var ytMessage = "- A Youtube Video code\n";
var imgMessage = "- A reference image\n";
var surveyMessage = "- An answer type\n";
if (qshortDesc == true || quizName == true || quizscore1 == true || qText == true || answertype == true || tfanswer == true || mcanswer == true || mcTextfields == true || youtubeVal == true || vimeoVal == true || tempImgCheck == true || surveyAnswers1 == true) {
var alertText = "It appears that you have not finished completing the question. Please ensure that you have completed the following question fields.\n";
if (quizName == true) {
alertText = alertText + qName;
};
if (qshortDesc == true) {
alertText = alertText + shortDescription;
};
if (quizscore1 == true) {
alertText = alertText + scoreMessage;
};
if (qText == true) {
alertText = alertText + QTextMessage;
};
if (answertype == true) {
alertText = alertText + answerTMessage;
};
if (tfanswer == true) {
alertText = alertText + tfMessage;
};
if (mcanswer == true) {
alertText = alertText + mcMessage;
};
if (mcTextfields == true) {
alertText = alertText + mcFields;
};
if (youtubeVal == true) {
alertText = alertText + ytMessage;
};
if (vimeoVal == true) {
alertText = alertText + vimMessage;
};
if (tempImgCheck == true) {
alertText = alertText + imgMessage;
};
if (surveyAnswers1 == true) {
alertText = alertText + surveyMessage;
};
confirm(alertText);
};
};
一旦用户完成填写他们点击提交的表单，这些是运行的脚本：
var confirmQCount = function(currentQ,LastQ) {
console.log('running the function');
if (jQuery('select[name="CAT_Custom_214"]').val() == "Yes") {
questionValidate(CAT_Custom_215, CAT_Custom_216, CAT_Custom_217, CAT_Custom_220, CAT_Custom_221, CAT_Custom_222, CAT_Custom_223, CAT_Custom_224, CAT_Custom_225, CAT_Custom_226, CAT_Custom_227, CAT_Custom_228, CAT_Custom_244);
} else if (jQuery('select[name="CAT_Custom_13"]').val() == ' ' || jQuery('select[name="CAT_Custom_13"]').val() == 'No') {
question1Validate(currentQ,LastQ);
} else {
qNumValidate();
};
};
我在表单 ID CAT_Custom_217 上收到错误，我一生都无法弄清楚为什么当它的设置与其他验证部分完全一样时它会给我一个错误。
如果您有任何机会可以帮助我，我知道这非常复杂，但我很乐意与您一起讨论。谢谢你，我很感激任何和所有的帮助。
编辑：我继续提出建议并分离出 questionValidation() 函数，但仍然收到未捕获的参考错误。以下是验证现在的结构：
var quizscore1 = false;
var qText = false;
var answertype = false;
var tfanswer = false;
var mcanswer = false;
var mcTextfields = false;
var youtubeVal = false;
var vimeoVal = false;
var tempImgCheck = false;
var surveyAnswers1 = false;
var quizName = false;
var qshortDesc = false;
///////////////////////// IF QUIZ: Checks that a score has been selected. ///////////////////////////
var scoreCheck = function() {
if (jQuery('select[name="CAT_Custom_249"]').val() == " ") {
quizscore1 = true;
};
};
///////////////////////// IF QUIZ: Checks if an answer type has been selected, validates the True/False field, the Multiple Choice field selection and text fields ///////////////////////////
var answerCheck = function(qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4) {
if (jQuery(qAnswerType).val() == " ") {
answertype = true;
} else if (jQuery(qAnswerType).val() == 'True/False') {
if (!jQuery(TFID).is(':checked')) {
tfanswer = true;
mcanswer = false;
};
} else if (jQuery(qAnswerType).val() == 'Multiple Choice') {
if (!jQuery(MCID).is(':checked')) {
mcanswer = true;
tfanswer = false;
if (jQuery(MCText1).val() != "" || jQuery(MCText2).val() != "" || jQuery(MCText3).val() != "" || jQuery(MCText4).val() != "") {
mcTextfields = false;
} else {
mcTextfields = true;
};
} else {
if (jQuery(MCText1).val() != "" || jQuery(MCText2).val() != "" || jQuery(MCText3).val() != "" || jQuery(MCText4).val() != "") {
mcTextfields = false;
} else {
mcTextfields = true;
};
};
};
};
////////////////////////// IF QUIZ OR SURVEY: Validates the visual references ////////////////////////////////
var visRefCheck = function(VisRef, Vimeo, Youtube, ImgID) {
if (jQuery(VisRef).val() != " ") {
if (jQuery(VisRef).val() == "Youtube Video" && jQuery(Youtube).val() == "") {
youtubeVal = true;
} else if (jQuery(VisRef).val() == "Vimeo Video" && jQuery(Vimeo).val() == "") {
vimeoVal = true;
} else {
youtubeVal = false;
vimeoVal = false;
tempImgCheck = false;
var validateImage = function(imgID) {
var imgName = jQuery(imgID).val();
var extension = imgName.split('.').pop().toUpperCase();
if (imgName.length < 1) {
imgok = 0;
} else if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") {
imgok = 0;
alert("You are using an invalid filetype. Please upload a different image or file type.");
} else {
imgok = 1;
};
if (imgok == 1) {
tempImgCheck = true;
} else {
tempImgCheck = false;
};
};
};
};
};
///////////////////////////// IF SURVEY: Validates Survey specific fields /////////////////////////////////
var surveyCheck = function(sAnswers1) {
if (jQuery(qTextID).val() == "") {
qText = true;
};
if (!jQuery(sAnswers1).is(':checked')) {
surveyAnswers1 = true;
} else {
surveyAnswers1 = false;
};
};
////////////////////////// Alert Variables ////////////////////////////
var qName = "- Quiz or Survey Name\n";
var shortDescription = "- A short description of the Quiz/Survey\n";
var scoreMessage = "- A required passing quiz score\n";
var QTextMessage = "- Question text\n";
var answerTMessage = "- An answer type\n";
var mcFields = "- The Multiple Choice answer fields\n";
var mcMessage = "- The correct Multiple Choice Answer\n"
var tfMessage = "- The correct True/False answer\n";
var vimMessage = "- A Vimeo Video code\n";
var ytMessage = "- A Youtube Video code\n";
var imgMessage = "- A reference image\n";
var surveyMessage = "- An answer type\n";
/////////////////////////////////// Sends an alert for the question based on true or false variables //////////////////////////////////////
var sendAlert = function() {
if (qshortDesc == true || quizName == true || quizscore1 == true || qText == true || answertype == true || tfanswer == true || mcanswer == true || mcTextfields == true || youtubeVal == true || vimeoVal == true || tempImgCheck == true || surveyAnswers1 == true) {
var alertText = "It appears that you have not finished completing the question. Please ensure that you have completed the following question fields.\n";
if (quizName == true) {
alertText = alertText + qName;
};
if (qshortDesc == true) {
alertText = alertText + shortDescription;
};
if (quizscore1 == true) {
alertText = alertText + scoreMessage;
};
if (qText == true) {
alertText = alertText + QTextMessage;
};
if (answertype == true) {
alertText = alertText + answerTMessage;
};
if (tfanswer == true) {
alertText = alertText + tfMessage;
};
if (mcanswer == true) {
alertText = alertText + mcMessage;
};
if (mcTextfields == true) {
alertText = alertText + mcFields;
};
if (youtubeVal == true) {
alertText = alertText + ytMessage;
};
if (vimeoVal == true) {
alertText = alertText + vimMessage;
};
if (tempImgCheck == true) {
alertText = alertText + imgMessage;
};
if (surveyAnswers1 == true) {
alertText = alertText + surveyMessage;
};
confirm(alertText);
eraseVariables();
};
};
/////////////////////////// Erases the true variables in preparation for the next question ///////////////////////////
var eraseVariables = function() {
quizscore1 = false;
qText = false;
answertype = false;
tfanswer = false;
mcanswer = false;
mcTextfields = false;
youtubeVal = false;
vimeoVal = false;
tempImgCheck = false;
surveyAnswers1 = false;
quizName = false;
qshortDesc = false;
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////// QUESTION VALIDATION FUNCTION! ////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var questionValidate = function(qTextID, qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4, VisRef, Vimeo, Youtube, ImgID, sAnswers1) {
if (document.getElementById('ItemName').value == "") {
quizName = true;
};
if (document.getElementById('CAT_Custom_251').value == "") {
qshortDesc = true;
};
if (jQuery(qTextID).val() == "") {
qText = true;
};
if (jQuery('select[name="CAT_Custom_14"]').val() == 'Quiz') {
scoreCheck();
answerCheck(qAnswerType, TFID, MCID, MCText1, MCText2, MCText3, MCText4);
visRefCheck(VisRef, Vimeo, Youtube, ImgID);
sendAlert();
} else if (jQuery('select[name="CAT_Custom_14"]').val() == 'Survey') {
surveyCheck(sAnswers1);
visRefCheck(VisRef, Vimeo, Youtube, ImgID);
sendAlert();
};
if (qCountNum == 15) {
qCountNum = 16;
};
};