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

lztngnrs 于 2023-11-15 发布在 Java

关注(0)|答案(2)|浏览(134)

我的意思是，当表单中的输入由于必填字段或空字段而出现错误时，我如何在该示例中设置表单的样式。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)";
    }
}

字符串

JavaScript

来源：https://stackoverflow.com/questions/77470585/how-can-i-style-a-form-when-it-doesnt-submit-because-of-a-required-field-or-som

2条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-11-15

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();
    }
}

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

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

2条答案

相关问题

热门标签

最新问答