0

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

Facebook 竞赛应用点击这里

原始验证是使用 HTML5 完成的，但由于这不适用于所有浏览器，我不得不尝试想出一些可以做到的东西！所以我创建了一个简单的javascript函数，我知道它可以工作，但是我无法让它与mootools lightface一起工作，因为我在提交按钮的单击上进行了验证，但是使用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提交按钮？

4

1 回答 1

0

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

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

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

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

  • document.getElementById()->document.id()
  • element.value->element.get('value')
  • element.addClass('validation-failed')
  • element.toggleClass('validation-failed')
  • element.hasClass('validation-failed')
  • element.property = value->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);
于 2012-07-23T08:43:55.223 回答