javascript jQuery - 多个元素类型的每个循环

jQuery - each loop on multiple element types

提问by Stan

I've build pretty simple validator that will display my custom error message when someone tries to submit empty form. But I have some questions.

我已经构建了非常简单的验证器，当有人尝试提交空表单时，它将显示我的自定义错误消息。但我有一些问题。

I have .each()loop on :inputelements - how can I make it loop through :inputand textarea?

我.each()在:input元素上有循环- 我怎样才能让它循环通过:input和textarea？

I use $(this).parent()to get the form object of input, but how can I make sure that it is form, not some other element like div?

我$(this).parent()用来获取输入的表单对象，但是如何确保它是表单，而不是像 div 这样的其他元素？

Code with comments

带注释的代码

$('form input[type=submit]').click(function(){

    // First we get the form class
    var form = $(this).parent(); // How can I make sure that the form is selected, not some other parent like div?
    var formClass = $(form).attr('class');

    // Then remove every previous messages on this form
    $('.' + formClass + ' .validation-error').each(function(){
        $(this).remove();
    });

    // Iterate through every input to find data that needs to be validated
    $('.' + formClass + ' :input').each(function(){ // How can I make this work with textareas as well as inputs without copying this whole each loop?

        // If it is marked as required proceed
        if ($(this).attr('required') == 'required'){

            // Getting current text and placeholder text
            var currentText = $(this).val();
            var placeholderText = $(this).attr('placeholder');

            // Replacing spaces to avoid empty requests
            currentText = currentText.replace(' ', '');
            placeholderText = placeholderText.replace(' ', '');

            // If current text is empty or same as placeholder proceed
            if (currentText == '' || currentText == placeholderText){

                // Get input position in order to place error message
                var inputPos = $(this).position();
                var left = inputPos.left + 200;
                var top = inputPos.top - 4;

                // Generate error message container and error message itself
                var errorMsg = '<div class="validation-error" style="position:absolute;left:' + left + 'px;top:' + top + 'px;"><- This</div>';

                // Appending error message to parent - form
                $(this).parent().append(errorMsg);
            }
        }
    });
});

回答by Adam Hopkinson

Question 1:

问题 1：

I have .each() loop on :input elements - how can I make it loop through :input and textarea?

我在 :input 元素上有 .each() 循环 - 如何让它循环通过 :input 和 textarea？

Answer:

回答：

$(':input, textarea').

Question 2:

问题2：

I use $(this).parent() to get the form object of input, but how can I make sure that it is form, not some other element like div?

我使用 $(this).parent() 来获取输入的表单对象，但是如何确保它是表单，而不是像 div 这样的其他元素？

Answer:

回答：

$(this).closest('form')

回答by driangle

You can use a comma to select multiple elements:

您可以使用逗号来选择多个元素：

form.find("input,textarea").each(function(){...} );

回答by Roman Bataev

To iterate through both input and textarea:

遍历 input 和 textarea：

$('.' + formClass + ' :input, .' + formClass + ' textarea').each...

To access parent form:

要访问父表单：

$(this).parents("form")