Stop sending html form data onclick to javascript if there is validation error

Question

I have created a contact form in html and JS. It has html5 default validations. But when i click on Send button form gets submitted with blank data and i receive blank email.and at the same time validations also pop ups. Want to stop sending blank form data. Please help. TIA.

JS code:

HTML:

<form action="" method="POST" class="form panel-body" role="form ">     
    <div class="form-group">
        <input class="form-control" id="name" name="name" autofocus placeholder="Your Name*" type="name" required/>
        <class="form-control" id="nameError" style="disply:none;">
    </div>
    <div class="form-group">
        <span class="askfordemoalerts" id="nameError" style="disply:none;"></span>
    </div>
    <div class="form-group">
        <input class="form-control" id="emailID"  name="emailID" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" autofocus placeholder="Your e-mail*" type="email" required/>
    </div>
    <div class="form-group">
        <input type="tel" " class="form-control" id="phone" name="phone" placeholder="Telephone/Mobile Number*" autofocus required />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="companyname" id="companyname" required placeholder="Company Name*" rows="1"></text>
    </div>
    <div class="form-group">
        <select class="form-control dropdown" id="noofemployees" style="color:#555555c2" required>
            <option value="" disabled selected>Number of Employees*</option>
            <option value="1-9">1-9</option>
            <option value="10-49">10-49</option>
            <option value="50-99">50-99</option>
            <option value="100-249">100-249</option>
            <option value="249-499">249-499</option>
            <option value="500-999">500-999</option>
            <option value="1000-4999">1000-4999</option>
            <option value="5000+">5000+</option>
        </select>
    </div>
    <div class="form-group">
        <textarea class="form-control" name="message" id="message" required placeholder="Message*" rows="5"></textarea>
    </div>                  
    <div class="form-group" style="color:#555555c2">
        <label> Contact me now<input type="radio" class="form-control radio" name="radiobtn" value="contactmenow" required onclick="contactmenow();"/><br>
        </label>    
        <label> Schedule a demo<input type="radio" class="form-control radio" name="radiobtn" value="scheduleademo" required onclick="scheduleademo();"/>
        <br>
        </label>    
    </div>      
    <div class="form-group">    
          <input name="date1" id="date1" class="form-control" type="datetime-local" style="display: none;"/>
    </div>
    <div class="form-group">
        <button class="btn btn-primary pull-right" name="sendButton" onkeypress="$('#').text(''); type="submit" onClick="askfordemo();">Send</button>
    </div>
</form>

JS:

function askfordemo(){
 var path = document.URL;
 var url = "";
       url = new URL(path);
 var frm = $(document.forms);
 var formData = JSON.stringify(frm.serialize());
 var name = $("#name").val();
 var emailID = $("#emailID").val();     
 var phone = $("#phone").val();
 contactDateValidation();
 var param = new Object();
 param.name=encodeURIComponent(name);
 param.emailID=encodeURIComponent(emailID);
 param.phone=encodeURIComponent(phone);
 var paramjson = JSON.stringify(param);
     path = path.substring(0, path.lastIndexOf("/"));
     $.ajax({  url : path + '/ms/askForDemo/sendMail',
   type: 'POST',
   data: paramjson,
         dataType: "json",
   contentType: "application/json",
   crossDomain: 'true',
   success: function(formData){JSON.stringify(formData)},
         error: function(x, y, z) {
         alert("Internet connection is lost. Please try again later.");
     } });}

loose the type="submit" from button tag and handle the redirection code in js... — Gaurav Tyagi, Jul 06 '18 at 05:25

score 0 · Answer 1 · answered Jul 05 '18 at 12:01

jQuery/JS doesn't know anything about the HTML5 validation , so to check if everything is valid you can run like this :

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});

HTML5 validation will only work if you use classic html approach to sending data using form tags.

You can find more data on this on W3C also here are couple of similar answers:

Kirankumar Dafda · Answer 2 · 2018-07-06T05:22:34.630

0

Try setting form id like

<form id="form1" ... >
    <!-- all content -->
</form>

Just write down your whole code into

function askfordemo()
{
    var validator = $("#form1").validate(options);
    if (validator.form()) {
        // All code here
    }else{
        alert("Please fill all required fields")
    }
}

edited Jul 06 '18 at 05:22

answered Jul 05 '18 at 12:10

Kirankumar Dafda

2,354
5
29
56

Uncaught TypeError: Cannot read property 'validate' of undefined – Abhi Jul 05 '18 at 13:32

score 0 · Answer 3 · answered Jul 05 '18 at 12:13

You have to check if the data from the form are valid using .checkValidity() jQuery function before executing them further. .checkValidity() returns true if the data is valid.

$(document).ready(function(){
    $("form").submit(function(){
        if($("form")[0].checkValidity()) {
            alert('valid data');
            // do your operation here
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<form action="" method="POST" class="form panel-body" role="form ">  
    <div class="form-group">
     <input class="form-control" id="name" name="name" autofocus placeholder="Your Name*" type="name" required>
    </div>
    
    <div class="form-group">
     <span class="askfordemoalerts" id="nameError" style="disply:none;"></span>
    </div>
    
    <div class="form-group">
     <input class="form-control" id="emailID"  name="emailID" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" autofocus placeholder="Your e-mail*" type="email" required/>
    </div>
       <div class="form-group">
    <input type="tel"  class="form-control" id="phone" name="phone" placeholder="Telephone/Mobile Number*" autofocus required />
    </div>
    <div class="form-group">
     <input type="text" class="form-control" name="companyname" id="companyname" required placeholder="Company Name*" rows="1">
    </div>
    <div class="form-group">
         <select class="form-control dropdown" id="noofemployees" style="color:#555555c2" required>
         <option value="" disabled selected>Number of Employees*</option>
         <option value="1-9">1-9</option>
         <option value="10-49">10-49</option>
         <option value="50-99">50-99</option>
       </select>
    </div>
    <div class="form-group">
     <textarea class="form-control" name="message" id="message" required placeholder="Message*" rows="5"></textarea>
    </div>     
       <div class="form-group" style="color:#555555c2">
     <label> Contact me now<input type="radio" class="form-control radio" name="radiobtn" value="contactmenow" required /><br>
     </label> 
     <label> Schedule a demo<input type="radio" class="form-control radio" name="radiobtn" value="scheduleademo" required/>
     <br>
     </label> 
    </div>  
    <div class="form-group"> 
        <input name="date1" id="date1" class="form-control" type="datetime-local" style="display: none;"/>
    </div>
    <div class="form-group">
     <button class="btn btn-primary pull-right" name="sendButton" type="submit">Send</button>
    </div>
   </form>

Stop sending html form data onclick to javascript if there is validation error

3 Answers3