Question

我的表格是这样的

Form.html

<div class="wrapper">
<form action="" method="post" id="myForm">
<div class="form-input">First name = <input type ="text" name="fname" ><div class="error">First Div</div></div>
<div class="form-input">Last Name  = <input type="text" name ="lname" ><div class="error">Second Div</div></div>
<input type="submit" name ="submit" value="submit">
</form>
</div>

我想通过jquery

从每个错误类中获取Text（）

JQuery代码： -

$(function() {
$('#myForm').submit(function(e) {
    e.preventDefault();
    var $inputs = $('#myForm :input');

    $inputs.each(function() {
        var data = $(this).val();
        alert($(this).html());

        /* Here i want to get each error class text  by jquery */ 

    });
});

如果jquery有可能，请给我一些方法来获得这样的东西

谢谢大家：）

Answer 1

您可以使用next（）

获取下一个兄弟，即错误div

$(function() {
$('#myForm').submit(function(e) {
    e.preventDefault();
    var $inputs = $('#myForm input[type="text"]');

    $inputs.each(function() {
        var data = $(this).val();
        alert($(this).html());

        /* Here i want to get each error class text  by jquery */ 
        alert($(this).next().text());

    });
});

Answer 2

感谢所有人的帮助和时间：）

我刚刚成功学会使用每个函数使用jQuery创建自定义验证，而无需使用任何插件。

$(function(){
$('#submit').click(function(e) {
e.preventDefault();
 $(".error").html("");
  var $inputs = $('#myForm :input');
    var values = {};
    
    $inputs.each(function() {
		var data = $(this).val();
		if(data == "")
	    {
	    	var Error = '<font color="red"> ' + this.name +' is required </font><br>' ;
	    	$(this).next('.error').append(Error);
	    }
	    else
	    {
	    	values[this.name] = data ;
	    }
	});
  console.log(values);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="wrapper">
<form action="" method="post" id="myForm">
<div calss="form-input">First name = <input type ="text" name="firstname" ><div class="error"></div></div>
<div calss="form-input">Last Name  = <input type="text" name ="lastname" ><div class="error"></div></div>
<input type="submit" name ="submit" value="submit" id="submit">
<div id="error"></div>
</form>
</div>

Answer 3

不要像你那样做$inputs.each。

但请将其格式化为他，请注意索引和elem值。

$inputs.each(function(index, elem) {
    var $this = $(elem);
    var data = $this.val();
    alert($this.html());

    /* Here i want to get each error class text  by jquery */ 
    $this.siblings('.error').html()
});

你为什么这么问？好吧，如果您要绑定事件处理程序并在那里使用范围，那么您将遇到大问题，因为这会经常发生变化并变得不可预测。

通过使用函数提供的实际当前元素，您100％确定您正在与所需元素进行对话。通过在这种情况下将它绑定到变量$this，您可以将当前元素完全传递给其他作用域函数。

另请查看jquery文档中兄弟姐妹函数的文档 https://api.jquery.com/siblings/

Answer 4

您可以将类选择器用作：

 $(function () {
        $('#myForm').submit(function (e) {
            e.preventDefault();
            var $inputs = $('#myForm :input');
            $inputs.each(function () {
                var data = $(this).val();
                alert($(this).html());
            });
            $('.error').each(function () {
                alert($(this).html());
            });              
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="wrapper">
<form action="" method="post" id="myForm">
<div calss="form-input">First name = <input type ="text" name="fname" ><div class="error"></div></div>
<div calss="form-input">Last Name  = <input type="text" name ="lname" ><div class="error"></div></div>
<input type="submit" name ="submit" value="submit">
</form>
</div>

使用$ .each（）进行自定义JQuery验证

4 个答案:

感谢所有人的帮助和时间：）