Question

我创建了一个简单的javascript函数来验证使用mootools在facebook应用程序中创建的表单：

Facebook comepetition app Click here

原始验证是使用HTML5完成的，但由于这不适用于所有浏览器，我不得不尝试提出一些可能的东西！所以我创建了一个简单的javascript函数，我知道它的工作原理但是我无法使用mootools lightface，因为我已经验证了onClick提交按钮但是使用lightface插件我没有选择这样做如果有意义的话，提交按钮是独立于表单定义的吗？

我无法弄清楚如何在此处上传代码，但如果您转到链接并选择“Chuckie”作为答案，您将看到显示的表格，并可以从那里查看帧源！

这是我的验证码：

function validate(form) {
    var fail = false;
    var name = document.getElementById("full_name");

    if (name.value.length == 0) {
      document.getElementById("okName").className = "fail";
      fail = true;
    }else{
      document.getElementById("okName").className = "success";
    }



    var email = document.getElementById("email");
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (email.value.length == 0 || !emailPattern.test(email.value)) {
      document.getElementById("okEmail").className = "fail";
        fail = true;
    }else{
      document.getElementById("okEmail").className = "success";
    }



    var phone = document.getElementById("phone");
    var phonePattern = /^\+?[0-9]{0,15}$/ ;

    if (phone.value.length == 0 || !phonePattern.test(phone.value)) {
      document.getElementById("okPhone").className = "fail";
        fail = true;
    }else{
      document.getElementById("okPhone").className = "success";
    }

    if ( fail ) {
        alert( "You didn't fill out all inputs" );
    } else {
        alert( "Everything OK" );
    }
}//End of validation function

我基本上想要的是尽可能将此方法传递给mootools提交按钮？

Answer 1

你真的应该给Form.Validator一个旋转（来自mootools-more）。

带有一堆预制的验证器以及自己定义验证器的能力。

http://mootools.net/docs/more/Forms/Form.Validator

另外，如果您使用的是mootools，您可能希望留在api中。

document.getElementById() - ＆gt; document.id()
element.value - ＆gt; element.get('value')
element.addClass('validation-failed')
element.toggleClass('validation-failed')
element.hasClass('validation-failed')
element.property = value - ＆gt; element.set('property', value);

如果此函数要在提交事件上运行，您可能希望更改它，以便它作为上下文（this）绑定到表单，其中参数为您可以停止的event。

function validate(event) {
    var fail = false;

    // logic.


    if (fail) {
        event && event.stop && event.stop();
        return false;
    }
    this.submit();
}

document.id('someform').addEvent('submit', validate);

如何将自己的验证代码添加到MooTools光面表单中

1 个答案: