javascript - 带有 mootools 的表单输入元素数组

Question

我需要对表单中的所有输入元素进行排列以检查它们是否为空（验证也在服务器上）。Mootools 被用作该站点的库，所以这是我的代码：

$$('#emeraldForm input').addEvent("submit",function(){
    //form validation

});

我想在提交表单之前这样做。空的将被赋予一个错误类，该类将在“keyup”事件中被删除。

在此处查看完整代码

Answer 1

如果您不想使用 HTML5 required 属性或 Mootool 的更多验证提供程序（内联验证），那么您可以做一些简单的事情，例如分配所有必需的 input[type=text] 元素和 input[type=checkbox] 元素

class="required" 

然后做这样的事情：

$('emeraldForm').addEvent("submit",function(evt){
    var preventSubmission = false;
    $(this).getElements("input[type=text].required").each(function(elem) {
        if (elem.get("value").trim() == "") { 
            elem.addClass("error");                
            preventSubmission = true; 
        }
    });
    $(this).getElements("input[type=checkbox].required").each(function(elem) {
        if (!elem.get("checked")) { 
            elem.addClass("error");                
            preventSubmission = true; 
        }
    });
    if (preventSubmission) {
        evt.preventDefault();
    }
});

我正在添加类错误，它可以在 CSS 中指定为红色背景或输入元素旁边的某个图标或类似的注意绘图。

Answer 2

If can live with HTML5 compatible website only. Then you set the "required" attribute in the input field. There will be no need of client side or server side validation. All the HTML5 compatible browsers will do it for you. Here is some sample code:

<input  name="url" placeholder="Input Example" type="text" required>