验证 Javascript 函数中的两个变量

Question

我是 JavaScript 新手，正在尝试使用它在提交表单之前验证表单。第一个函数“validateYouTube”有效并成功检查 YouTube 代码是否已输入，但第二个函数“validateSongandTitle”我遇到了问题。

为了使第二个函数 validateSongandTitle 有效，我有以下条件：

• 如果用户未选择歌曲（如他们将下拉列表保留为“未选择歌曲”，则他们需要输入“标题”才能使其有效。

这是我所拥有的：

 <form action="add-video.php" method="post" onsubmit="return validateForm(event)" id="AddVid"> 
<select name="songid">
      <option value="">No song selected</option>
      <option value="1">Dr Jones</option>
      <option value="2">Spaceship</option>
      <option value="3">Fantasy</option>
</select>
<input type="text" id="ytcode" name="ytcode" />
<div id="formyoutubecode"></div>
<input type="text" name="title" size="50" />
<div id="formtitle"></div>
 
 <script>
 function validateForm(event) {
    event.preventDefault();
    var YouTubeValid = validateYouTube();
    var SongandTitleValid = validateSongandTitle();

    if (!YouTubeValid || !SongandTitleValid) {

        return;
    }

    event.target.submit();
}

function validateYouTube() {
    var a = document.forms["AddVid"]["ytcode"].value;
    if (a == null || a == "") {
        document.getElementById('formyoutubecode').innerHTML = "<small><font color='red'>YouTube Code Required</font></small>";
        return false;
    }

    return true;
}

function validateSongandTitle() {
    var b = document.forms["AddVid"]["songid"].value;
    var c = document.forms["AddVid"]["title"].value;
   if ((b == "No song selected" && c == "")) {
        document.getElementById('formtitle').innerHTML = "<small><font color='red'>Video title *Required</font></small>";
        return false;
    }

    return true;
}

 </script>

请告诉我为什么它不起作用？预先感谢。

Answer 1

<select>

标签的值基于其<option>的

值

，而不是文本。换句话说：

将

b == "No song selected"

更改为

b == ""

。

或者

将

<option value="">No song selected</option>

更改为

<option value="No song selected">No song selected</option>

。