HTML 变量不能为空

问题描述

我正在尝试为一个愚蠢的小疯狂库创建一个表单。将表单放在一起后，我想确保从每个部分中选择了一些内容。每个部分都将信息传递给我创建的一个变量。我想确保总是选择某些东西，但从来没有做过这样的事情，因为这是编码新手。我尝试使用 required 属性，但没有任何结果。如果有人能在正确的方向上给我一点推动力，那就太棒了。

<body>

<script language="JavaScript">
function generateMadLib() {
  //Declaring and Initializing variables
  var Hobbies = "";
  var name ="";
  var PersonalityTrait = "";
  var ColorChoice = "";
  var DayOrNight ="";
  var theSelect;
  var choice = 0;
  var theOption;
  var story = "";


  /*
      Retrieving Name
        document.madLibForm.txtName 
            -- madLibForm matches the name of the <form> element.
            -- txtName matches the name of the <input> element.     
    */  
  name = document.madLibForm.txtName.value;

  //Retrieving Hobbies
  if (document.madLibForm.chkVideoGames.checked == true) {
    Hobbies = "Video Games ";
  } //end if
  if (document.madLibForm.chkWorkingOut.checked == true) {
    Hobbies += "Working Out ";
  } //end if
  if (document.madLibForm.chkReading.checked == true) {
    Hobbies += "Reading ";
  } //end if
  if (document.madLibForm.chknothing.checked == true) {
    Hobbies += "Other ";
  } //end if

  //Retrieving Meal Type
  if (document.madLibForm.DayOrNight[0].checked == true) {
    DayOrNight = document.madLibForm.DayOrNight[0].value;
  } else {
      DayOrNight = document.madLibForm.DayOrNight[1].value;
    } //end if

  //Retrieving Personality trait
  theSelect = document.madLibForm.Personality;
  choice = theSelect.selectedindex;
  theOption = theSelect.options[choice];
  PersonalityTrait = theOption.value;

  //Retrieving Color choice 
  theSelect = document.madLibForm.FavoriteColor;
  choice = theSelect.selectedindex;
  theOption = theSelect.options[choice];
  ColorChoice = theOption.value;
  

  /*
    Create the story using the user input that was provided
  */
  story = name + " such an odd name. Well " + name + " what kind of hobbies do you have? Oh I see you enjoy " + Hobbies +
  ". That's cool I personally enjoy playing video games and soccer so my hobbies are better than yours. It also seems you enjoy " + Hobbies +
  " at " + DayOrNight + " that is strange,I enjoy the opposite time of day. Lets see what kind of personality you have. " + name + 
  " has " + PersonalityTrait + ". Wow finally something we have in common. Now lets see what color you picked. " + name + 
  " picked " + ColorChoice + ",and we are back to disagreeing again. Based on the answers you have given we can't be friends.";
  document.madLibForm.story.value = story;
}

</script>



</head>

<h1>Mad Lib</h1>

Create a Mad-lib story by filling out the input controls listed. 
<form name = "madLibForm">
<h3>Give a name,any name will do:</h3>
<input type = "text" name = "txtName" value = "">
<P>

<h3>what kind of hobbies do you have?:</h3>
<input type = "checkBox" name = "chkVideoGames" value = "Video Games">Video games<br>
<input type = "checkBox" name = "chkWorkingOut" value = "Working Out">Working out<br>
<input type = "checkBox" name = "chkReading" value = "Reading">Reading<br>
<input type = "checkBox" name = "chknothing" value = "Other">Other<br>

<h3>Morning or Night</h3>
<input type = "radio" name = "DayOrNight" value = "Morning">Morning<br>
<input type = "radio" name = "DayOrNight" value = "Night">Night<br>
<P>

<h3>What kind of personality do you have?</h3>
<select name = "Personality">
  <option value = ""></option>
  <option value = "Shy">Shy</option>
  <option value = "Outgoing">Outgoing</option>
  <option value = "Crazy">Crazy</option>
</select>
<p>

<h3>Of the three which color do you prefer</h3>
<select name = "FavoriteColor">
  <option value = ""></option>
  <option value = "Red">Red</option>
  <option value = "Blue">Blue</option>
  <option value = "Yellow">Yellow</option>
</select>
<p>

<input type = "button" value = "display Story" onClick = "generateMadLib()">
<p>

<h3>Mad-lib story:</h3>
<textarea name= "story" rows="20" cols="80" wrap>
</textarea>
<p/>

<input type="reset" value="Reset Mad-lib">
</form>

</body>

解决方法

您可以在某些表单元素上使用 HTML 属性来强制用户选择或输入某些内容。请参阅 HTML select required attribute 和 HTML input required attribute。

不过，这不会禁止用户提交包含空白元素的表单，因此如果您将其提交到某个服务器，则应始终在前端和后端进行验证。

html javascript requiredfieldvalidator requiredfieldvalidator