html - mootools 在链接点击时验证并提交表单

Question

如何验证我的表单并在链接点击事件中提交？我的代码如下：

new Element('a',{
                                'html': "To cart", 
                                'class': 'shop_add',
                                'href': 'javascript:void(0)',
                                events: {
                                    click: function(e){

                                            new Form.Validator(product_details_sub_container, {
                                                      stopOnFailure: true,
                                                      useTitles: true,
                                                      errorPrefix: "",
                                                      ignoreHidden : false,
                                                      onFormValidate: function(passed, form, event) {

                                                        console.log("Validation status: " + passed);
                                                        if (passed) {                   
                                                            event.stop();



                                                            ...ajax request is here
                                                         }
                                                      }

                                            });


                                    }
                                }
                        }).inject(container);

为什么 onFormValidate() 函数不起作用？谢谢！

Answer 1

You are creating new Form.Validator on each link click. I do not see the whole code, but here is a cleaned version of the code you posted, and works with both, button and link:

JavaScript

window.addEvent('domready', function() {

    var container = $('container');
    var form = $('myForm');

    var myFormValidator = new Form.Validator( form, {
        stopOnFailure: true,
        useTitles: true,
        errorPrefix: "",
        ignoreHidden : false,
        onFormValidate: function( passed, form, event ) {
            console.log( "Validation status: " + passed );
            if ( passed ) {                   
                event.stop();
                // ...ajax request is here
            }

        }
    });

    new Element( 'a', {
        'html': "To cart", 
        'class': 'shop_add',
        'href': 'javascript:void(0)',
        events: {
            click: function(e) {
                myFormValidator.validate(e);
            }
        }
    }).inject( container );

});

HTML for testing

<div id="container"></div>
<form id="myForm" name="input" action="" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>