Jquery form validation when submit button is clicked

Question

So I want to do a validate function using jquery for a school assignment which makes sure that no fields are left empty on the click of the submit button. I did the code below but it doesn't seem to be working. Any ideas? Thanks

$(document).click(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if(name=="" || surname=="" || email=="" || comment==""){
        alert("A field is missing");
    } else {
        return true;
    }
});

Edit 1: I change the first line so I made it .submit instead:

$('#valForm').submit(function(){

Edit 2: JS Code:

$(document).ready(function () {
$('#valForm').submit(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if (!name || !surname || !email || !comment) {
        alert("A field is missing");
        e.preventDefault();
        return false;
    } else {
        return true;
    }
})

});

Html Code:(Don't mind the indentation)

    <div id="question-box">
        <form onsubmit="checkEmail()" id="valForm">
            <h2>Contact the club</h2>
            <label for="">First Name:</label>
            <input type="text" name="firstname" id="firstname" placeholder="First Name"/>
            <br>
            <br>
            <br>
            <label for="">Last Name:</label>
            <input type="text" name="lastname" id="lastname" placeholder="Last Name"/>
            <br>
            <br>
            <br>
            <label for="">Email:</label>
            <input type="text" name="email" id="email" placeholder="email"/>
            <br>
            <br>
            <br>
            <label for="">Comments:
                <br>
                <br>
                <br>
                <br>
            </label>
            <input type="text" name="comments" id="comment">
            <br>
            <br>
            <br>
            <input type="submit" value="submit" id="submit">
        </form>
    </div>

Ok it worked. Stupid mistake as usual...wasn't calling the script plugin where I was supposed to. Thanks all for your patience <3

Are you sure you don't want $('#my_form_id').submit(function(){ ? — designosis
– designosis, Commented Jun 8, 2018 at 17:11
Also make sure the document/ jQuery is loaded by placing the $('#my_form_id').submit(...); within $(document).ready(function() { //Form submit listener here }); — Tom G
– Tom G, Commented Jun 8, 2018 at 17:13

Tom G · Accepted Answer · 2018-06-08 17:19:28Z

Make sure that you return false and call e.preventDefault() on the event object that comes through... you need to add e in .submit(function(e)) to do this

$(document).ready(function() { 
  $('#userCommentForm').submit(function(e) {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if(name=="" || surname=="" || email=="" || comment==""){
        alert("A field is missing");
        e.preventDefault();
        return false;
    } else {
        return true;
    }
  });
});

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <form id="userCommentForm" action="myFormHandler.php">
      <table>
        <tr>
          <td>First Name:</td>
          <td><input id="firstname"></td>
        </tr>
        <tr>
          <td>Last Name:</td>
          <td><input id="lastname"></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input id="email"></td>
        </tr>
        <tr>
          <td>Comment:</td>
          <td><textarea id="comment"></textarea></td>
        </tr>
        <tr>
          <td colspan="2">
            <center>
              <button type="submit">Post Comment</button>
            </center>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

designosis · Accepted Answer · 2018-06-08 17:13:06Z

0

Instead of

$(document).click(function () {

... try ...

$('#my_form_id').submit(function(){

answered Jun 8, 2018 at 17:13

designosis

5,2631 gold badge42 silver badges58 bronze badges

Comments

Jay Jodiwal · Accepted Answer · 2018-06-08 17:14:07Z

0

It seems that selector is causing an issue $(document). Can you show the part of code where you are setting document variable. The selector must be a class or id. Show your complete code and html as well. That will help pointing out the correct problem

For class, $('.class-name')

For id, $('#id-name')

answered Jun 8, 2018 at 17:14

Jay Jodiwal

1212 silver badges10 bronze badges

2 Comments

Joshua Over a year ago

for some reason it is still submitting even when a field is empty

Jay Jodiwal Over a year ago

where are you loading the js file you have posted. I don't see it in html. And since you've put action directly in the form, it will not go the javascript way

Omar · Accepted Answer · 2018-06-08 17:15:53Z

0

Name the form and listen for it to submit. if the value of the fields are empty then it will return false.

$('#form').submit(function () {
    var name = $("#firstname").val();
    var surname = $("#lastname").val();
    var email = $("#email").val();
    var comment = $("#comment").val();

    if(!name || !surname || !email || !comment){
        alert("A field is missing");
    } else {
        return true;
    }
});

answered Jun 8, 2018 at 17:15

Omar

3,0903 gold badges42 silver badges74 bronze badges

Comments

ClaraFrazao · Accepted Answer · 2018-06-08 17:32:04Z

This works for me. See if it helps you:

$('#user_form').submit(function(){
  var ok = true;
  var req_field;
  $('.required').each(function() {
    req_field = $(this);
    req_field_id = $(this).attr('id');
    if($(this).val().trim() == '') {
      alert('the field ' + req_field_id + ' is empty.');
      ok = false;
    }
  });
  if(!ok) {
    return false;
  }
  return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="user_form">
  <input id="firstname" class="required" name="nome" type="text" placeholder="firstname*">
  <input id="lastname" class="required" name="apelido" type="text" placeholder="lastname*">	
  <input id="email" class="required" name="email" type="email" placeholder="email*">
  <input id="comment" class="required" name="comment" type="text" placeholder="comment*">	
  <input class="submit" type="submit" value="SUBMETER">
</form>

Collectives™ on Stack Overflow

Jquery form validation when submit button is clicked

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related