Question

我需要遍历表单中的所有输入元素以检查它们是否为空（验证也在服务器上）。 Mootools正在使用该网站的库，所以这是我的代码：

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

});

我想在提交表单之前这样做。空的那些将被给予一个错误类，将在'keyup'事件中删除。

See full code here

Answer 1

如果您不想使用HTML5必需属性或Mootool的更多验证提供程序（内联验证），您可以执行一些简单的操作，例如分配所有必需的输入[type = text]元素和输入[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

如果只能与HTML5兼容的网站。然后在输入字段中设置“required”属性。不需要客户端或服务器端验证。所有兼容HTML5的浏览器都会为您完成。以下是一些示例代码：

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

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

2 个答案: