off FUNCTION jquery

Question

I am trying to make a validation form in a .php file , so it works in a way that once the field validation is done the form gets submitted . My form although is getting submitted but for that I need to press the submit button twice . Below is the code , the problem is mainly in the script section.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <title></title>
  <style type="text/css">
    .container{
      margin-top: 20px;
      width: 500px;
    }
    #content{
      resize: none;
    }
    #success{
      display: none;
    }
    #failure{
      display: none;
    }
  </style>
<body>
  <div class="container">
  <h1 class="display-3">Get in Touch</h1>
  <div class="alert alert-danger" role="alert" id="failure">
</div>
<div class="alert alert-success" role="alert" id="success">
  <strong>Well done!</strong> We will get back to you ASAP.
</div>
  <form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="subject">Subject</label>
    <input type="text" class="form-control" id="subject">
  </div>
  <div class="form-group">
    <label for="content">Content</label>
    <textarea class="form-control" id="content" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>

  </div>
</body>
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>


<script type="text/javascript">
  $( "form" ).submit(function( event ) {
  event.preventDefault();
  var missing="";
  if($("#email").val()=="")
  {
    missing=missing+"<p>Email is Missing</p><br>"
  }
   if($("#content").val()=="")
  {
    missing=missing+"<p>Content is Missing</p><br>"
  }
   if($("#subject").val()=="")
  {
    missing=missing+"<p>Subject is Missing</p><br>"
  }
  if(missing!="")
  {
    $("#failure").html(" <strong>Oh snap!</strong><br>."+missing);
    $("#failure").show();
  }
  else{
    $("#failure").hide();
    $("form").off("submit").submit();    <- Problematic line 
  }
});
</script>
</body>
</html>

Side note, `missing = missing...` should be `missing += missing...` if you want to show all errors — StudioTime, Jun 19 '17 at 08:11
I think `missing = missing + "something"` is equal to `missing += "something"` in this case. — Laposhasú Acsa, Jun 19 '17 at 08:14

score 1 · Answer 1 · answered Jun 19 '17 at 07:56

1

The issue is here:

$("form").off("submit").submit()

Instead of this, use preventDefault to hold the form submit to check the validation, and when validation succeed submit the form using:

$("form").submit();

answered Jun 19 '17 at 07:56

Mayank Pandeyz

25,704
4
40
59

not happening mate. Same thing is happening , I need to click submit twice to make a submission . – Vishal Kumar Jun 19 '17 at 09:44

score 1 · Answer 2 · answered Jun 19 '17 at 08:00

1

.off only removes events that were added using .on. It doesn't remove native events or anything like that.

You're already using event.preventDefault() to stop the native form submission, which is correct.

Therefore simply $("form").submit(); should be sufficient to submit the form programmatically, once your validation is complete.

P.S. I assume you are validating your form on the server (PHP) side as well? JavaScript validation is nice for enhanced user experience but you cannot rely on it, as a malicious user (or bot) can easily change by manipulating the page source, or just ignore it entirely and post to your URL. If you value the integrity of your server and your data you must always validate forms on the server side as well.

answered Jun 19 '17 at 08:00

ADyson

57,178
14
51
63

Just tried it out but as a result , I am getting following errors:- Uncaught Range error Maximum call stack at r.fn.init.push () at Function.ga [as find] (jquery-3.1.1.slim.min.js:2) and 12 more errors , which are related to my jquery script version. – Vishal Kumar Jun 19 '17 at 09:01
I see you are using jQuery slim. Make sure none of the jQuery functions you are using are excluded from the "slim" version. See https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery for a basic list. If you need any of this stuff, try using the full version of jQuery instead. – ADyson Jun 19 '17 at 09:10

score 0 · Answer 3 · answered Jun 19 '17 at 07:56

0

Instead of $("form").off("submit").submit(); you can use this.submit();

answered Jun 19 '17 at 07:56

Titus

22,031
1
23
33

score 0 · Answer 4 · answered Jun 19 '17 at 08:00

0

Try to switch the order of the 2 functions:

$("form").submit().off("submit");

answered Jun 19 '17 at 08:00

Arpad Hollo

201
1
9

Reversing the order is just filling my call stack and throwing back an error . – Vishal Kumar Jun 19 '17 at 09:43

off FUNCTION jquery

4 Answers4