我有一个非常复杂的JavaScript，我有一些困难。我写过一个测验/调查创建页面。用户将信息输入到这个巨大的表格中，他们基本上是为其他用户创建一个测验。
然而，我遇到了验证问题。页面的工作方式，用户将填写第一组表单字段，然后如果他们决定添加另一个测验问题，则会评估上一组必填字段，并为任何未完成的项目提供警报。
他们最多可以创建15个问题，并在每个问题部分的末尾进行验证。当用户最大限度地提出问题数量时，最终问题字段的验证将在提交时运行的脚本中进行。
运行最后一个问题验证时，我收到一个错误，我有一个Uncaught Reference错误。然而，这个错误对我没有意义，因为表单的评估方式 - 我正在调用函数并将表单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;
};
};