我是新手,我正在try 使用它在提交表单之前对其进行验证.第一个函数"valiateYouTube"可以工作并成功地判断YouTube代码是否已经输入,但第二个函数"valiateSongandTitle"出现了问题.

为了使第二个函数valiateSongandTitle有效,我满足以下条件:

  • 如果用户没有 Select 一首歌曲(比如他们将下拉列表保留为"No song selected"),那么他们需要输入一个"title"才能使其有效.

这是我得到的:

 <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>

请告诉我为什么它不起作用?先谢谢你.

推荐答案

代码中的主要问题是,判断select是否 Select 了有效选项时使用的是option元素的text,而不是value.如果你把b == "No song selected"改成b == '',代码就可以了.

也就是说,您可以修改以下几点以提高代码质量:

  • 使用描述性变量名称.例如,ab对于试图理解您的代码的人帮助不大.请改用titlecode.
  • 不要在HTML中附加事件处理程序,这不再是一种好的做法.在您的JS代码中使用addEventListener()绑定它们.
  • 将您的元素‘缓存’在变量中,您可以在需要的地方重用这些变量,而不是从DOM中重复 Select 它们,这是一个相对缓慢的操作.
  • 尽量避免将HTML放到JS代码中.考虑到这一点,您可以在页面加载时将错误消息放在DOM中,并使用一个可根据输入的有效性进行切换的CSS类来简单地显示/隐藏它们.
  • <font>元素在very long年前就已弃用,永远不应该使用.根据需要使用css设置字体样式.

以下是进行了上述更改的工作版本:

const form = document.querySelector('#addvid');
const ytcodeField = document.querySelector('#ytcode');
const titleField = document.querySelector('#title');
const songidField = document.querySelector('#songid');
const formyoutubecode = document.querySelector('#formyoutubecode');
const formtitle = document.querySelector('#formtitle');

form.addEventListener('submit', e => {  
  const youTubeValid = validateYouTube();
  const songAndTitleValid = validateSongAndTitle();
  
  if (!youTubeValid || !songAndTitleValid) {
    e.preventDefault(); // fields are invalid, prevent submission
  }
});

function validateYouTube() {
  const ytcode = ytcodeField.value.trim();
  const isValid = ytcode !== '';
  formyoutubecode.classList.toggle('hidden', isValid);
  return isValid;
}

function validateSongAndTitle() {
  const songid = songidField.value;
  const title = titleField.value.trim();
  const isValid = songid === '' || (songid !== '' && title !== '');
  formtitle.classList.toggle('hidden', isValid);
  return isValid;
}
.hidden {
  display: none;
}

.error-message {
  color: #F00;
}
<form action="add-video.php" method="post" id="addvid">
  <select name="songid" id="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" class="hidden error-message">
    <small>YouTube Code Required</small>
  </div>
  <br />
  
  <input type="text" id="title" name="title" size="50" />
  <div id="formtitle" class="hidden error-message">
    <small>Video title *Required</small>
  </div>
  <br />
    
  <button>Submit</button>
</form>

Javascript相关问答推荐

有Angular 的material .未应用收件箱中的价值变化

具有相同参数的JS类

我无法在NightWatch.js测试中获取完整的Chrome浏览器控制台日志(log)

如何避免移动设备中出现虚假调整大小事件?

django无法解析余数:[0] from carray[0]'

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

从Node JS将对象数组中的数据插入Postgres表

使用auth.js保护API路由的Next.JS,FETCH()不起作用

每次重新呈现时调用useState initialValue函数

删除元素属性或样式属性的首选方法

如何在和IF语句中使用||和&;&;?

无法重定向到Next.js中的动态URL

处理app.param()中的多个参数

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

输入数据覆盖JSON文件

MAT-TREE更多文本边框对齐问题

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

如何按区域进行过滤并将其从结果数组中删除?

在JS/TS中构造RSA公钥

使用Java脚本筛选数组中最接近值最小的所有项