gpt4 book ai didi

javascript - jquery函数在提交后继续运行

转载 作者:行者123 更新时间:2023-11-27 23:58:23 25 4
gpt4 key购买 nike

我对 HTML5 和 JS 非常陌生,并且遇到了这个麻烦:

我试图在单击提交按钮后显示自定义验证消息。它工作正常,例如,如果名称字段为空,它将在按下按钮后显示我的自定义消息。然而,按下按钮后,当我填写该字段时,消息不断弹出。

而且,只有当我在当前字段上时才会发生这种情况。例如,如果我在页面上的其他位置单击鼠标,然后返回该字段,消息将停止弹出

尝试运行下面的代码片段,希望您能理解问题。

<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">
<title>WORKING WITH FORMS IN HTML5</title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.h5validate.js"></script>



<style>
@charset "UTF-8";
input:required+label:AFTER {
content: "*";
color: red
}
input:focus:invalid {
background-color: pink;
}
input:focus:valid {
background-color: #E5FFCC;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
input:optional {
border-color: silver;
}
input:focus:optional {
background-color: transparent;
}
#subb {
border-radius: 25px;
width: 200px;
height: 50px;
background-image: linear-gradient(to right, black 0%, white 100%);
color: black;
opacity: 0.8;
}
[data-Required] {
color: blue;
font-size: 20px;
}
</style>

<!--
<script>
function test(){

var elements = document.getElementsByTagName("INPUT");
for(var i = 0 ; i < elements.length; i++){
if(elements[i].validity.valueMissing){
elements[i].setCustomValidity("Dont leave me hanging :(");
}
else if(elements[i].validity.patternMismatch){
elements[i].setCustomValidity("Follow the pattern my friend");
}
else if(elements[i].validity.typeMismatch){
elements[i].setCustomValidity("Wrong type!!!");
}
else{
elements[i].setCustomValidity("");
}
}

}
</script>
-->

<script>
$(document).ready(function() {


var elements = $("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].validity.valueMissing) {
elements[i].setCustomValidity("Dont leave me hanging :(");
} else if (elements[i].validity.patternMismatch) {
elements[i].setCustomValidity("Follow the pattern my friend");
} else if (elements[i].validity.typeMismatch) {
elements[i].setCustomValidity("Wrong type!!!");
} else {
elements[i].setCustomValidity("");
}
}

$('#myform').Submit();
});
</script>






</head>

<body>
<form id="myform">
<input data-Required class="error" type="text" required id="name" placeholder="John Doe">
<label for="name">Full Name</label>
<br>
<br>

<input data-Required type="email" required id="email" placeholder="johhndoe@xyz.com">
<label for="email">Email</label>
<br>
<br>

<input data-Required type="phone" required id="phonenumber" pattern="\d\d\d\d\-\d\d\d\d\d\d\d" placeholder="0300-0000000">
<label for="phonenumber">Mobile Phone Number</label>
<br>
<br>



<input type="text" id="address" placeholder="houseno,streetno,societyname,cityname">
<label for="address">Address</label>
<br>
<br>

<input type="button" value="Submit" id="subb">
</form>



</body>

</html>

最佳答案

首先,为了更好地控制验证,您应该使用 <input type="button" value="Submit" id="subb">而不是输入 submit并为您的表单指定一个 id formId 。最后,在所有验证通过后,您可以提交如下表单,

$('#formId').submit();

关于javascript - jquery函数在提交后继续运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32064523/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com