0

Facebook アプリで動作するように mootools を使用して作成されたフォームを検証するための単純な JavaScript 関数を作成しました。

Facebookコンテストアプリはこちら

元の検証は HTML5 を使用して行われましたが、これはすべてのブラウザーで機能するとは限らないため、何かを考え出す必要がありました。だから私は単純なjavascript関数を作成し、それが機能することを知っていますが、送信ボタンのonClickで検証が機能していたため、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 に答える