本文介绍了如何使用jquery从ajax页面验证表单的输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的表单中有两个输入。第一个输入可以在ajax函数之前验证。第二个输入无法验证。第二个输入来自使用ajax的页面，提交按钮也来自使用ajax的页面。我需要使用ajax验证来自页面的第二个输入。此外，来自页面的提交按钮不起作用。请帮助我。 <！DOCTYPE html>
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script>
< script>如果（$（'＃Name1'）。）（）函数提供函数（）{
$（文档）.ready（函数（）{
$（＃form .length< 3）{
alert（请输入您的名字）;
$（'＃Name1'）。focus（）;
返回false;
}
$ .ajax（{
url：result.php，
method：GET//获取或发布
}）。done（function（response）{
var splitted = response.split（|）; // RESULT
$（＃Div1）。html（splitted [0]）; //第一个名字
$（如果（$（'＃Name2'）.html（splitted [1]）; //第一个名字
}）;
return（false）;
if ）.val（）。length< 3）{
alert（请输入您的第二个名字）;
$（'＃Name2'）。focus（）;
return false;
}
}）;
}）;
< / script>
< / head>
< body>
< form id =formaction =Page.php>
< div style =float：left;>
< b> Name1：< / b>
< / div>
< input id =Name1type =text>
< br>< br>< br>< br>
< div style =clear：both;>
< div style =float：left;>
< b> Name2：< / b>
< / div>
< div id =Div1style =float：left;>
< / div>
< br>< br>< br>
< div style =clear：both;>
< div id =Div2>
<按钮>第一个事件< / button>
< / div>
< / div>
< / div>
< / form>
< / body>
< / html>
这是result.php
< input type =textid =Name2>
我需要验证这个输入。 | <按钮>第二事件< /按钮>
解决方案
这段代码运作良好。我已经解决了我自己。
< html>
< head>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script>
< script>
$（document）.ready（function（）{
$（＃form）。submit（function（）{
if（$（'＃Name1'）） .val（）。length< 3）{
alert（请输入您的名字）;
$（'＃Name1'）。focus（）;
返回false; $ b $（$＃$ hidden）。val（）。length< 3）{
$ .ajax（{
url：result.php ，
method：GET//获取或发布
））。done（function（response）{
var splitted = response.split（|）; // RESULT
$（＃Div1）。html（splitted [0]）; //第一个名字
$（＃Div2）。html（splitted [1]）; //第一个名字
））;
// alert（请验证）;
返回false;
}
如果（$（'＃Name2'）.val（）.length alert（请输入你的第二个名字）;
$（'＃Name2'）。focus（）;
返回false;
}
}）;
}）;
< / script>
< / head>
< body>
< form id =formaction =Page.php>
< div style =float：left;>
< b> Name1：< / b>
< / div>
< input id =Name1type =text>
< br>< br>< br>< br>
< div style =clear：both;>
< div style =float：left;>
< b> Name2：< / b>
< / div>
< div id =Div1style =float：left;>
< input id =hiddentype =hidden>
< / div>
< br>< br>< br>
< div style =clear：both;>
< div id =Div2>
<按钮>第一个事件< / button>
< / div>
< / div>
< / div>
< / form>
< / body>
< / html>
result.php
< input type =hiddenid =hiddenvalue =something> < input type =textid =Name2> | < input id =buttontype =submitvalue =Second Event>
There are two inputs in my form. The first input can be validated before an ajax function. The second input can't be validated. The second input comes from a page using ajax and the submit button also comes from the page using ajax. I need to validate the second input which comes from the page using ajax. Also the submit button which comes from the page is not working. Please help me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
return (false);
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
This is result.php
<input type="text" id="Name2">
i need to validate this input. | <button>Second Event</button>
解决方案
This code works well. i have solved myself.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#form").submit(function(){
if ($('#Name1').val().length<3) {
alert ("please enter your first names");
$('#Name1').focus();
return false;
}
if ($('#hidden').val().length<3) {
$.ajax({
url: "result.php",
method: "GET" // Either get or post
}).done(function(response) {
var splitted = response.split("|"); // RESULT
$("#Div1").html(splitted[0]); // The first name
$("#Div2").html(splitted[1]); // The first name
});
//alert ("please verify");
return false;
}
if ($('#Name2').val().length<3) {
alert ("please enter your second names");
$('#Name2').focus();
return false;
}
});
});
</script>
</head>
<body>
<form id="form" action="Page.php">
<div style="float:left;">
<b>Name1:</b>
</div>
<input id="Name1" type="text">
<br><br><br><br>
<div style="clear:both;">
<div style="float:left;">
<b>Name2:</b>
</div>
<div id="Div1" style="float:left;">
<input id="hidden" type="hidden">
</div>
<br><br><br>
<div style="clear:both;">
<div id="Div2">
<button>First Event</button>
</div>
</div>
</div>
</form>
</body>
</html>
result.php
<input type="hidden" id="hidden" value="something"> <input type="text" id="Name2"> | <input id="button" type="submit" value="Second Event">
这篇关于如何使用jquery从ajax页面验证表单的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！