Custom JQuery validation with using $.each()

Question

My form something like this

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>

I want to get Text() form each error class by jquery

JQuery code :-

$(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 */ 

    });
});

Please give me some way to get something like this if this is possible by jquery

Thank you all :)

To clarify what Edu said, you spelled "class" as "calss" twice — akkatracker
– akkatracker, Commented Feb 13, 2017 at 9:40

Aman Kumar · Accepted Answer · 2017-02-13 10:49:27Z

2

Thanks all for your help and time :)

i just successfully learn to create custom validation with jQuery using each function without using any plugin .

$(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>

edited Feb 13, 2017 at 10:49

answered Feb 13, 2017 at 10:25

Aman Kumar

4,5573 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tigerdi Over a year ago

You should still mark an answer for your original question.

tigerdi · Accepted Answer · 2017-02-13 10:54:03Z

2

You can just get the next sibling which is the error div by using next()

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

    });
});

edited Feb 13, 2017 at 10:54

answered Feb 13, 2017 at 9:41

tigerdi

6127 silver badges13 bronze badges

1 Comment

tigerdi Over a year ago

just changed .html() to .text(), and so should show up. Also, i specified that the input is of type="text", otherwise you will get a third alert for the submit button.

Tschallacka · Accepted Answer · 2017-02-13 09:41:13Z

Don't do your $inputs.each like you do.

But format it like his, note the index and elem values.

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

Why you ask? well, if you are going to bind event handlers and using scopes in there, you're going to have big problems, because the this changes frequently then and becomes unpredictable.

By using the actual current element provided by the function you are 100% sure you're talking to the element you want. By binding it to a variable $this in this case, you can pass exactly the current element on to other scoped functions.

Also look up on the jquery docs the documentations for the siblings function https://api.jquery.com/siblings/

kritikaTalwar · Accepted Answer · 2018-04-10 09:51:03Z

0

You can use class selector as:

 $(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>

edited Apr 10, 2018 at 9:51

answered Feb 13, 2017 at 9:49

kritikaTalwar

1,7281 gold badge18 silver badges26 bronze badges

2 Comments

Aman Kumar Over a year ago

please check you answer .. if possible then please answer with snippet .. thanks@kritika

Tschallacka Over a year ago

This answer is to rough, it goes through all the .error fields instead of the error fields next to the input element like op requested.

Collectives™ on Stack Overflow

Custom JQuery validation with using $.each()

4 Answers 4

Thanks all for your help and time :)

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Thanks all for your help and time :)

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related