Прекратить отправку данных html-формы по клику на javascript, если произошла ошибка проверки

Question

Я создал контактную форму в html и JS. Он имеет HTML5 проверки по умолчанию. Но когда я нажимаю кнопку «Отправить», форма отправляется с пустыми данными, и я получаю пустое письмо. И в то же время проверки также всплывающие окна. Хотите прекратить отправку данных в пустой форме. Пожалуйста помоги. ТИА.

JS код:

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

Answer 1

Попробуйте установить идентификатор формы как

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

Просто запишите весь код в

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

Answer 2

Вы должны проверить, являются ли данные из формы действительными, используя .checkValidity() jQuery, прежде чем выполнять их дальше. .checkValidity() возвращает true, если данные действительны.

$(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>

Answer 3

jQuery / JS ничего не знает о проверке HTML5, поэтому чтобы проверить, все ли правильно, вы можете запустить так:

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

Проверка HTML5 будет работать только в том случае, если вы используете классический html-подход к отправке данных с использованием тегов формы.

Вы можете найти больше информации по этому вопросу на W3C , а также здесь есть пара похожих ответов:

• Проверка HTML5 перед отправкой ajax
• html5 form checkValidity () метод не найден