Form not submitting and jQuery validation not working unless submit button is clicked twice

Question

I created a form to send out texts. My issue is I have to hit the submit button twice for the form to get the form to send or for the validation to work. I am wanting the validation to work right after the user goes to the next input or at the very least on the first form submission.

Why is the form's button needing clicked on twice for any of this to work? I created a snippet that shows what it is doing.

$('.text-popup').hide();

  //$("#submit-text").on("click", function(event) {
  $("#text-form").on("submit", function(event) {
 event.preventDefault();
 
    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
 var targeted_popup_class = jQuery(this).attr('data-popup-open');
    
    $("#text-form").validate({
      onfocusout: true,
      rules: {
        number: {
          required: true,
          minlength: 2
        },
        carrier: {
          required: true
        },
        message: {
          required: true,
          minlength: 2
        }
      },
      messages: {
        number: {
          required: "Please enter the party's phone number.",
          minlength: "The phone number seems a bit short, doesn't it?"
        },
        carrier: {
          required: "Please choose their carrier"
        },
        message: {
          required: "Please enter your message",
          minlength: "Your message seems a bit short. Please enter at least 2 characters"
        }
      },
      submitHandler: function(form) {


        $.ajax({
          url: "text-send.php",
          type: "POST",
          data: {
            "number": number,
            "carrier": carrier,
            "message": message
          },
          success: function(data) {
            //console.log(data); // data object will return the response when status code is 200
            if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
            } else {
    $("#text-form")[0].reset();
    $('.text-popup').fadeIn(350).delay(2000).fadeOut();
            }
          },
          complete: function() {
            $('body, html').animate({
              scrollTop: $('#text-success').offset().top
            }, 'slow');
          },
          error: function(xhr, textStatus, errorThrown) {
            alert(textStatus + "|" + errorThrown);
            //console.log("error"); //otherwise error if status code is other than 200.
          }
        });
      }
    })
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form action="" method="POST" id="text-form">
  <input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number">
  <select class="carrier-input" id="carrier" name="carrier">
   <option selected="selected">Phone Carrier</option>
   <option value="vtext.com">Verizon</option>
   <option value="vmobl.com">Virgin Mobile</option>
   <option value="sms.alltelwireless.com">Alltel</option>
   <option value="txt.att.net">AT&T</option>
   <option value="sms.myboostmobile.com">Boost Mobile</option>
   <option value="text.republicwireless.com">Republic Wireless</option>
   <option value="messaging.sprintpcs.com">Sprint</option>
   <option value="tmomail.net">T-Mobile</option>
   <option value="email.uscc.net">U.S. Cellular</option>
  </select>
  <textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea>
  <input type="submit" value="Send Text" id="submit-text">
  <div class="text-popup" data-popup="popup-1">
   <div class="popup-inner">
    <div id="popup-inner-content">Your text successfully sent!</div>
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
   </div>
  </div>
 </form>

imvain2 · Accepted Answer · 2016-04-27T15:37:01.570

The issue that you are experiencing is the validate plugin doesn't need to be wrapped in the onclick. Remove the Onclick event around it. The validate plugin runs ONSUBMIT of the form.

$('.text-popup').hide();

 
    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
 var targeted_popup_class = jQuery(this).attr('data-popup-open');
    
    $("#text-form").validate({
      onfocusout: true,
      rules: {
        number: {
          required: true,
          minlength: 2
        },
        carrier: {
          required: true
        },
        message: {
          required: true,
          minlength: 2
        }
      },
      messages: {
        number: {
          required: "Please enter the party's phone number.",
          minlength: "The phone number seems a bit short, doesn't it?"
        },
        carrier: {
          required: "Please choose their carrier"
        },
        message: {
          required: "Please enter your message",
          minlength: "Your message seems a bit short. Please enter at least 2 characters"
        }
      },
      submitHandler: function(form) {


        $.ajax({
          url: "text-send.php",
          type: "POST",
          data: {
            "number": number,
            "carrier": carrier,
            "message": message
          },
          success: function(data) {
            //console.log(data); // data object will return the response when status code is 200
            if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
            } else {
    $("#text-form")[0].reset();
    $('.text-popup').fadeIn(350).delay(2000).fadeOut();
            }
          },
          complete: function() {
            $('body, html').animate({
              scrollTop: $('#text-success').offset().top
            }, 'slow');
          },
          error: function(xhr, textStatus, errorThrown) {
            alert(textStatus + "|" + errorThrown);
            //console.log("error"); //otherwise error if status code is other than 200.
          }
        });
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form action="" method="POST" id="text-form">
  <input type="number" name="number" placeholder="Recipient Phone Number" class="number-input" id="number">
  <select class="carrier-input" id="carrier" name="carrier">
   <option value="" selected="selected">Phone Carrier</option>
   <option value="vtext.com">Verizon</option>
   <option value="vmobl.com">Virgin Mobile</option>
   <option value="sms.alltelwireless.com">Alltel</option>
   <option value="txt.att.net">AT&T</option>
   <option value="sms.myboostmobile.com">Boost Mobile</option>
   <option value="text.republicwireless.com">Republic Wireless</option>
   <option value="messaging.sprintpcs.com">Sprint</option>
   <option value="tmomail.net">T-Mobile</option>
   <option value="email.uscc.net">U.S. Cellular</option>
  </select>
  <textarea placeholder="Your Message" class="message-input" id="message" name="message" rows="10"></textarea>
  <input type="submit" value="Send Text" id="submit-text">
  <div class="text-popup" data-popup="popup-1">
   <div class="popup-inner">
    <div id="popup-inner-content">Your text successfully sent!</div>
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
   </div>
  </div>
 </form>

Thanks. Do you know how I can validate the carrier select input? I am unsure of how to make that work because it always sees my first option (which I use as a placeholder) filled in, — Becky, Apr 27 '16 at 15:26
sometimes the best solutions are the simplest ones. give the phone carrier first option a value of nothing: ``. — imvain2, Apr 27 '16 at 15:38
no problem. a quick note, that you will need to move around some of your variables for the ajax, since now they are no longer in the same function. — imvain2, Apr 27 '16 at 15:48
Just noticed that since it doesn't send now. Would under my ` submitHandler: function(form) {` be the best place or under the ajax? `$.ajax({` — Becky, Apr 27 '16 at 16:01
in your `data` call, just access the values directly instead of a variable and would work or you can move those variables above the ajax also. — imvain2, Apr 27 '16 at 16:02

Form not submitting and jQuery validation not working unless submit button is clicked twice

1 Answers1