当前位置：文江博客话题详情

Onsubmit 验证更改背景必填字段？

发布于 2024-11-28 05:57:52 字数 91 浏览 0 评论 0原文

有人知道使用 Javascript 在 onSubmit 上使用 class="required" 更改所有空字段的背景颜色的好教程/方法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫儰鉨ミ守葔 2024-12-05 05:57:52

像这样的事情应该可以解决问题，但是如果不发布更多详细信息，很难准确地知道您在寻找什么：

document.getElementById("myForm").onsubmit = function() {
    var fields = this.getElementsByClassName("required"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ff0000";
            sendForm = false;
        }
        else {
            //Else block added due to comments about returning colour to normal
            fields[i].style.backgroundColor = "#fff";
        }
    }
    if(!sendForm) {
        return false;
    }
}

这将一个侦听器附加到带有 id< 的表单的 onsubmit 事件/代码>“myForm”。然后，它获取该表单中具有“required”类的所有元素（请注意，旧版本的 IE 不支持 getElementsByClassName，因此您可能需要研究其中的替代方案），循环遍历该集合，检查每个值，如果发现任何空值，则更改背景颜色。如果有任何空的，则会阻止表单提交。

这是一个工作示例。

Something like this should do the trick, but it's difficult to know exactly what you're looking for without you posting more details:

document.getElementById("myForm").onsubmit = function() {
    var fields = this.getElementsByClassName("required"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ff0000";
            sendForm = false;
        }
        else {
            //Else block added due to comments about returning colour to normal
            fields[i].style.backgroundColor = "#fff";
        }
    }
    if(!sendForm) {
        return false;
    }
}

This attaches a listener to the onsubmit event of the form with id "myForm". It then gets all elements within that form with a class of "required" (note that getElementsByClassName is not supported in older versions of IE, so you may want to look into alternatives there), loops through that collection, checks the value of each, and changes the background colour if it finds any empty ones. If there are any empty ones, it prevents the form from being submitted.

Here's a working example.

回复收藏 0 原文

阪姬 2024-12-05 05:57:52

也许是这样的：

$(document).ready(function () {
    $('form').submit(function () {
        $('input, textarea, select', this).foreach(function () {
            if ($(this).val() == '') {
                $(this).addClass('required');
            }
        });
    });
});

Perhaps something like this:

$(document).ready(function () {
    $('form').submit(function () {
        $('input, textarea, select', this).foreach(function () {
            if ($(this).val() == '') {
                $(this).addClass('required');
            }
        });
    });
});

回复收藏 0 原文

攀登最高峰 2024-12-05 05:57:52

我很快就成为了 jQuery 的粉丝。文档很棒。

http://docs.jquery.com/Downloading_jQuery

如果您决定尝试该库，请在此处是你的代码：

//on DOM ready event
$(document).ready(
  // register a 'submit' event for your form
  $("#formId").submit(function(event){
   // clear the required fields if this is the second time the user is submitting the form
   $('.required', this).removeClass("required");
   // snag every field of type 'input'.
// filter them, keeping inputs with a '' value
// add the class 'required' to the blank inputs.
   $('input', this).filter( function( index ){
       var keepMe = false;
       if(this.val() == ''){
         keepMe = true;
       }
       return keepMe;
     }).addClass("required");
   if($(".required", this).length > 0){
     event.preventDefault();
   }
  });
);

I quickly became a fan of jQuery. The documentation is amazing.

http://docs.jquery.com/Downloading_jQuery

if You decide to give the library a try, then here is your code:

//on DOM ready event
$(document).ready(
  // register a 'submit' event for your form
  $("#formId").submit(function(event){
   // clear the required fields if this is the second time the user is submitting the form
   $('.required', this).removeClass("required");
   // snag every field of type 'input'.
// filter them, keeping inputs with a '' value
// add the class 'required' to the blank inputs.
   $('input', this).filter( function( index ){
       var keepMe = false;
       if(this.val() == ''){
         keepMe = true;
       }
       return keepMe;
     }).addClass("required");
   if($(".required", this).length > 0){
     event.preventDefault();
   }
  });
);

回复收藏 0 原文

~没有更多了~