如果出现验证错误，请停止将 html 表单数据 onclick 发送到 javascript

Question

我在html 和JS 中创建了一个联系表单。它具有 html5 默认验证。但是，当我单击发送按钮时，表单会提交空白数据并且我收到空白电子邮件。同时验证也会弹出。 想要停止发送空白表单数据。请帮忙。 TIA。

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

jQuery/JS 对 HTML5 验证一无所知，因此要检查一切是否有效，您可以这样运行：

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

HTML5 验证仅在您使用经典的 html 方法使用表单标签发送数据时才有效。

您可以在W3C 上找到更多关于此的数据，这里也有几个类似的答案：

• HTML5 validation before ajax submit
• html5 form checkValidity() method not found

Answer 2

尝试设置表单ID，如

<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 3

在进一步执行之前，您必须使用.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>