CODEWITHSUNDEEP
javascriptjquery
Joshua
Joshua

Reputation: 107

Jquery form validation when submit button is clicked

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

Upvotes: 1

Views: 553

Answers (5)

ClaraFrazao
ClaraFrazao

Reputation: 95

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>

Upvotes: 0

Tom G
Tom G

Reputation: 3650

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>

Upvotes: 1

Omar
Omar

Reputation: 3040

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

Upvotes: 0

Jay Jodiwal
Jay Jodiwal

Reputation: 121

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')

Upvotes: 0

designosis
designosis

Reputation: 5263

Instead of 

$(document).click(function () {

... try ...

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

Upvotes: 0

Related Questions