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

How to add my own validation code to a MooTools lightface form

本文关键字：MooTools lightface 表单 添加 代码 我自己 自己的 验证      更新时间：2023-12-23

我创建了一个简单的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的submit按钮？

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

附带一堆预先制作的验证器，还可以自己定义验证器。

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);
相关文章：