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
– Gaurav Tyagi, Commented Jul 6, 2018 at 5:25

SergejV · Accepted Answer · 2018-07-05 12:01:02Z

0

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:

answered Jul 5, 2018 at 12:01

SergejV

4931 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sujan Gainju · Accepted Answer · 2018-07-05 12:13:10Z

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>

Kirankumar Dafda · Accepted Answer · 2018-07-06 05:22:34Z

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 6, 2018 at 5:22

answered Jul 5, 2018 at 12:10

Kirankumar Dafda

2,3845 gold badges32 silver badges59 bronze badges

1 Comment

Abhi Over a year ago

Uncaught TypeError: Cannot read property 'validate' of undefined

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related