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

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

我有

.each（）

在

:input

元素上循环-如何使它在

:input

和

文本区域中循环

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

带注释的代码

$('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);
            }
        }
    });
});

$（“表单输入[type=submit]”）。单击（函数（）{
//首先我们要上表格课
var form=$（this.parent（）；//如何确保选择了该表单，而不是其他父级，如div？
var formClass=$（form.attr（'class'）；
//然后删除此表单上以前的所有邮件
$（'.+formClass+'.validation error'）。每个（函数（）{
$（this.remove（）；
});
//迭代每个输入以查找需要验证的数据
$（'.+formClass+':input'）。each（function（）{//如何在不复制整个each循环的情况下使用textareas和inputs？
//如果标记为需要，则继续
if（$（this）.attr（'required'）=='required'）{
//获取当前文本和占位符文本
var currentText=$（this.val（）；
var placeholder text=$（this.attr（'placeholder'）；
//替换空格以避免空请求
currentText=currentText.replace（“”，”）；
占位符文本=占位符文本。替换（“”，”）；
//如果当前文本为空或与占位符相同，请继续
如果（currentText=''|| currentText==占位符文本）{
//获取输入位置以放置错误消息
var inputPos=$（this.position（）；
var left=输入位置left+200；
var top=输入位置top-4；
//生成错误消息容器和错误消息本身
var errorMsg='问题1:

$(':input, textarea').

$(this).closest('form')

我在：input元素上有.each（）循环-如何使它在：input和textarea中循环

回答：

$(':input, textarea').

$(this).closest('form')

问题2:

$(':input, textarea').

$(this).closest('form')

我使用$（this）.parent（）获取输入的form对象，但如何确保它是form，而不是像div这样的其他元素

回答：

$(':input, textarea').

$(this).closest('form')

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

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

要迭代输入和文本区域，请执行以下操作：

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

要访问父窗体：

$(this).parents("form")

这将需要sizzle和一个不必要的DOM遍历。@AlienWebguy sizzle？对于多重选择器？我真的不知道sizzle，但我已经用现成的jquery完成了这两项工作。SizzleJS是jquery用于复杂DOM遍历筛选的工具。它很快，但想法是尽量避免它，并尽可能使用本机JS函数。
$（“#mydiv”）
使用
getElementById（）
，
$（“.myclass”）
使用
getElementsByClassName（）
。您的选择器需要进行一些计算。这不是世界末日，只是需要注意的一些事情。啊，谢谢。我最初将选择器作为
输入，但将其更改为OP中的内容。不过很方便知道。