javascript 当表单由于必填字段或其他问题而无法提交时,如何设置样式

lztngnrs  于 2023-11-15  发布在  Java
关注(0)|答案(2)|浏览(133)

我的意思是,当表单中的输入由于必填字段或空字段而出现错误时,我如何在该示例中设置表单的样式。Like this注意表单标签和字段是红色的。
我尝试使用表单提交事件来查找字段中是否没有值,但什么也没有发生。请帮助。

function func() {
    alert("nice!");
    document.getElementById("form").submit();
    var day = document.getElementById("day").value;
    var month = document.getElementById("month").value;
    var year = document.getElementById("year").value;
    var dayLab = document.getElementById("dayLab");
    var monLab = document.getElementById("monLab");
    var yrLab = document.getElementById("yrLab");

    if (day == null || month == null || year == null) {
        dayLab.style.color = "rgb(200, 0, 0)";
        monLab.style.color = "rgb(200, 0, 0)";
        yrLab.style.color = "rgb(200, 0, 0)";
    }
}

字符串

lxkprmvk

lxkprmvk1#

1.将required属性应用于适当的输入:
<input type="text" required>
1.在invalid事件的每个输入上添加一个侦听器,以添加包含所需样式的类。
1.(可选)在blur事件的每个输入上添加一个侦听器,以验证字段,并根据结果添加或删除类。

注意,如果使用submit()方法以编程方式提交表单,则不执行验证。

document.querySelectorAll('input[type=text]').forEach(e => {

  // when focus leaves an input, validate it
  e.addEventListener("blur", evt => {
    if (evt.target.checkValidity())
      evt.target.classList.remove('invalid')
    else
      evt.target.classList.add('invalid')
  })
  
  // form is automatically validated when submitted
  e.addEventListener("invalid", evt => {
    evt.target.classList.add('invalid')
  })
})
body, input {
  font-family: sans-serif;
  font-size: 16px;
}
input {
  padding: 3px 8px;
  border: 1px solid #eee;
  border-radius: 5px;
}
input[type=submit] {
  padding: 5px 12px;
}
label {
  display: block;
  margin-bottom: 1em;
}
.invalid {
  border: 1px solid red;
}
label:has(.invalid) {
  color: red;
}
<form id="f1">
  <label>First Name* <input type="text" required></label>
  <label>Last Name* <input type="text" required></label>
  <input type="submit">
</form>
bvjveswy

bvjveswy2#

当条件不满足时,您可以创建一些样式。

function func() {
    alert("nice!");

    const form = document.getElementById("form");
    const day = document.getElementById("day").value;
    const month = document.getElementById("month").value;
    const year = document.getElementById("year").value;
    const dayLab = document.getElementById("dayLab");
    const monLab = document.getElementById("monLab");
    const yrLab = document.getElementById("yrLab");

    if (!day || !month || !year) {
        dayLab.style.color = monLab.style.color = yrLab.style.color = "rgb(200, 0, 0)";
   
    } else {
   
        dayLab.style.color = "";
        monLab.style.color = "";
        yrLab.style.color = "";
        form.style.border = "";
        
        form.submit();
    }
}

字符串

相关问题