forms - Mootools停止表单提交方法

Question

我不想使用 <input type=submit />按钮提交表单，我改为使用 <a>元素。这是由于样式要求。所以我有这个代码:

myButton.addEvent('click', function() {
    document.id('myForm').submit();
});

但是，我还编写了一个类来改进和实现 placeholder属性 inputs和textareas :

var FDPlaceholderText = new Class({
    Implements: Events,
    initialize: function() {

        var _self = this;
        var forms = document.getElements('form');        

        forms.each(function(form) { // All forms
            var performInit = false;
            var i = 0;
            var ph = [];
            form.getElements('input, textarea').each(function(el) { // Get form inputs and textareas
                if (el.getProperty('placeholder') != null) { // Check for placeholder attribute
                    performInit = true;
                    ph[i] = _self.initPlaceholder(el); // Assign the placeholder replacement to the elements
                } 
                i ++;
            });

            if (performInit) {
                _self.clearOnSubmit(form, ph);
            } 
        });

    },
    clearOnSubmit: function(form, ph) {
        form.addEvent('submit', function(e) {
            ph.each(function(el) {
                if (el.value == el.defaultValue) {
                    el.value = '';
                }
            });
        });
    },
    initPlaceholder: function(el) {

        el.defaultValue = el.getProperty('placeholder');
        el.value = el.getProperty('placeholder');

        el.addEvents({
            'focus': function() {
                if (el.value == el.defaultValue) el.value = '';          
            },
            'blur': function() {
                if(el.value.clean() == ''){ 
                    el.value = el.defaultValue;
                }
            }
        });

        return el;
    }
});

window.addEvent('domready', function() {
    new FDPlaceholderText();
});

如果使用实际的<input type=submit />提交表单，上面的类效果很好。按钮:它监听提交并清除输入值(如果它们仍然是默认值)，从而验证它们本质上是空的。

但是，似乎因为我通过监听 <a> 上的点击事件来提交我的表单之一。标记 form.addEvent('submit', function(e) {没有被解雇。

感谢任何帮助。

Answer 1

您可以将点击处理程序更改为 fireEvent()，而不是直接调用 .submit():

myButton.addEvent('click', function() {
    document.id('myForm').fireEvent('submit');
});

请记住几件事(或更多)。

1. 缺少 placeholder= 属性的元素的占位符值毫无意义
2. 如果您检测到占位符支持，请执行一次，而不是在每个元素上执行一次，它不会在循环中途突然改变。你可以使用类似 varsupportsPlaceholder = !!('placeholder' in document.createElement('input')); - 请记住，如果浏览器当前支持它，则无需执行任何操作， near enough 60%做。
3. 您还可以执行 !supportsPlaceholder && el.get('placeholder') && self.initPlaceholder(el); - 这样可以避免在不需要时检查属性
4. 提交表单时，您确实需要清除旧版浏览器中的 placeholder= 值，否则“必需”等验证将失败。如果验证仍然失败，则必须恢复占位符，因此您需要更灵活的事件模式
5. 避免直接引用 el.value 等对象属性 - 请改用 el.get('value') 等访问器(1.12 中为 getProperty)

有关如何在 mootools 中处理此问题的更复杂示例，请参阅我的存储库:https://github.com/DimitarChristoff/mooPlaceholder