jQuery and input forms

Question

I made this input form with Name and Text.

<form action="" method="post" class="main">
    <label>Write a comment!</label><br>
    <input placeholder="Name" class="form-text" name="user" type = "text" id = "user" autofocus size = "48"><br/>
    <textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
    <br />
    <input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>

and I added some jQuery for this form.

$(".form-submit").click(function() {
    var commentBox = $("#comment");
    var userBox = $("#user");

    var commentCheck = commentBox.val();
    var userCheck = userBox.val();

    if(commentCheck == '' || commentCheck == NULL ) {
        commentBox.addClass("form-text-error");
        console.log(commentBox);
        return false;
    }   

    if (userCheck == '' || userCheck == NULL){
        userBox.addClass("form-text-error");
        console.log(userBox);
        return false;
    }
});

And now I'm here with this problem. I want the user to fill both fields in order to write a comment (name & text). For any empty fields I want to add class "form-text-error" . Everything works except for field with users name.

Any suggestions?

"I want the user to fill both fields in order to write a comment" You don't have two fields which you will fill to allow the comment, you just have a username and a comment fields. Or you meant to say "in order to POST ...." — MHD Alaa Alhaj
– MHD Alaa Alhaj, Commented Dec 10, 2017 at 10:55

Pedram · Accepted Answer · 2017-12-10 11:31:23Z

1

Use Length to get length of input then if return zero do addClass

$(".form-submit").click(function() {
  var commentBox = $("#comment");
  var userBox = $("#user");

  var commentCheck = commentBox.val();
  var userCheck = userBox.val();



  if (commentCheck.length <= 0 || commentCheck == NULL) {
    commentBox.addClass("form-text-error");
    console.log(commentBox);
    return false;
  }

  if (userCheck.length <= 0 || userCheck == NULL) {
    userBox.addClass("form-text-error");
    console.log(userBox);
    return false;
  }



});

.form-text-error {
border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="main">
  <label>Write a comment!</label><br>
  <input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"><br/>
  <textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
  <br />
  <input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>

Also you can use submit function instead of click:

$(".form-submit").submit(function() {});

But i recommend you to use something like this:

$(".form-submit").click(function(e) {
  e.preventDefault(); //remove this later
  $('.form-text').each(function() {
    if ($(this).val().length <= 0) {
      $(this).addClass('form-text-error');
      return false;
    } else {
      $(this).removeClass('form-text-error');
      return true;
    }
  });
});

edited Dec 10, 2017 at 11:31

answered Dec 10, 2017 at 10:53

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

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

2 Comments

Toms Eglite Over a year ago

Thanks for your code, but now i can send the form with both fields empty :D

Pedram Over a year ago

@TomsEglite return false cause of this. try my rewrited code, and let me know the result.

Komal · Accepted Answer · 2017-12-10 10:58:27Z

0

it is due to condition if return with false so it will check 1st condition and return back no further check. need to make changes accordingly as below.

$(".form-submit").click(function() {
    var commentBox = $("#comment");
    var userBox = $("#user");

    var commentCheck = commentBox.val();
    var userCheck = userBox.val();
    var err = false;


    if(commentCheck == '' || commentCheck == NULL ) {
        commentBox.addClass("form-text-error");
        console.log(commentBox);
        err = true;
    }   

    if (userCheck == '' || userCheck == NULL){
        userBox.addClass("form-text-error");
        console.log(userBox);
        err = true;
    }
if(err)
return false;


});

answered Dec 10, 2017 at 10:58

Komal

3041 silver badge7 bronze badges

2 Comments

Toms Eglite Over a year ago

Still the same thing happens.

Toms Eglite Over a year ago

Ok, sorry, I did not check the code properly. Now it kinda works, i managed to add form-error-class to both fields, but anyway, i can send the form even with one field empty.

Syfur Rahaman Shohag · Accepted Answer · 2017-12-10 11:16:01Z

0

You are doing return false after comment

if(commentCheck == '' || commentCheck == NULL ) {
        commentBox.addClass("form-text-error");
        console.log(commentBox);
        return false;
    }

That's why it didn't get name field You can use like this as like your requirement,

var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
if(commentCheck == '' || commentCheck == NULL ) {
    $("#comment").addClass("form-text-error");
    console.log(commentBox);
    flag = 1;
}   
if (userCheck == '' || userCheck == NULL){
    $("#user").addClass("form-text-error");
    console.log(userBox);
    flag = 1;
}
if(flag == 1)return false;

answered Dec 10, 2017 at 11:16

Syfur Rahaman Shohag

12 bronze badges

3 Comments

Toms Eglite Over a year ago

This is the same solution as @Komal suggested me to do. Now I can add a class to both fields if they are empty, but I still can send the form even if one field is empty.

Syfur Rahaman Shohag Over a year ago

Then use this snippet, it will return false for any empty input fields.. var commentBox = $("#comment"); var userBox = $("#user"); var commentCheck = commentBox.val(); var userCheck = userBox.val(); var flag =0; var flag1 =0; if(commentCheck == '' || commentCheck == NULL ) { $("#comment").addClass("form-text-error"); console.log(commentBox); flag = 1; } if (userCheck == '' || userCheck == NULL){ $("#user").addClass("form-text-error"); console.log(userBox); flag1 = 1; } if(flag == 1 || flag1==1)return false;

Toms Eglite Over a year ago

Even after this code I can still send the form even with one empty field.. this is pain in the ass. :D

Syfur Rahaman Shohag · Accepted Answer · 2017-12-10 12:21:50Z

Use input type="button" and use this snippet that's tested and it works...
$("#comment").removeClass("form-text-error");
        $("#user").removeClass("form-text-error");
        var commentBox = $("#comment");
        var userBox = $("#user");
        var commentCheck = commentBox.val();
        var userCheck = userBox.val();
        var flag =0;
        var flag1 =0;
        if(commentCheck == '' || commentCheck == null ) {
            $("#comment").addClass("form-text-error");
            console.log(commentBox);
            flag = 1;
        }   
        if (userCheck == '' || userCheck == null){
            $("#user").addClass("form-text-error");
            console.log(userBox);
            flag1 = 1;
        }
        if(flag == 1 || flag1 == 1){return false;}
        else{return true;}

Optimizer · Accepted Answer · 2017-12-10 12:57:11Z

0

You are returning false for both the validations. Also, use .length === 0 || !box. A common function would help.

Fixed

use e.preventDefault(); This would validate the username field as well and would not submit if empty.

var commentBox = $("#comment");
var userBox = $("#user");
   
function checkIfEmpty(box, check) { 
    if (check.length === 0  || !box) {
        box.addClass("form-text-error");
        console.log(box);
        return true;
    } else {
        box.removeClass("form-text-error");
        return false;
    }
 }
    
$(".form-submit").on('click', function(e) {
    e.preventDefault();
    var commentCheck = commentBox.val();
    var userCheck = userBox.val();
    var commentCall = checkIfEmpty(commentBox, commentCheck);
    var userCall =  checkIfEmpty(userBox, userCheck);
    if(userCall === true && commentCall === true) {
      return false;
    }
});

.form-text-error {
background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="main">
    <label>Write a comment!</label>
    <br/>
    <input placeholder="Name" class="form-text" name="user" type="text" id="user" autofocus size="48"/>
    <br/>
    <textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
    <br/>
    <input type="submit" class="form-submit" name="new_comment" value="Submit comment"/>
</form>

edited Dec 10, 2017 at 12:57

answered Dec 10, 2017 at 11:38

Optimizer

7478 silver badges7 bronze badges

4 Comments

Toms Eglite Over a year ago

It adds the text error class, but i can still send the input to my db with one field empty. I' m starting to think that there could be a problem somewhere else.

Optimizer Over a year ago

Fixed the code. Now, the form won't submit if name field is empty.

Toms Eglite Over a year ago

Copied the code, it gets this error:

Uncaught TypeError: Cannot read property 'length' of undefined     at checkIfEmpty (global.js:14)     at HTMLInputElement.<anonymous> (global.js:29)     at HTMLInputElement.dispatch (jquery.min.js:3)     at HTMLInputElement.r.handle (jquery.min.js:3)

Optimizer Over a year ago

The snippet is working fine. I think it's related to the variable scope. Try declaring var commentBox = $("#comment"); var userBox = $("#user"); variables as global.

Collectives™ on Stack Overflow

jQuery and input forms

5 Answers 5

2 Comments

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related