Jquery表单验证不起作用?
问题描述:
我希望有人可以用我一直在建立的一些jquery脚本来帮助我。该脚本工作并成功地将一些表单数据发布到mysql数据库。Jquery表单验证不起作用?
我有的问题是我试图实现表单验证,但我无法验证工作,我怀疑我正确放置一个括号不正确的地方。我在这里发布的脚本可以工作,但表单验证不会。任何帮助不胜感激。
$(document).ready(function() {
$("#your_results").hide();
$("#your_data").hide();
$("#submitButtonId").on("click", function(e) {
$('#gauge').empty();
e.preventDefault();
//Validate the input
$(function() {
$("#myform").validate({
});
//Post the form if field has been completed
var formdata = $('#myform').serialize();
$.post('php_includes/insert.php', formdata,
function(data) {
//Reset Form
$('#myform')[0].reset();
fetchRowCount();
});
return false;
});
});
//Fetch data from server
function fetchRowCount() {
$.ajax({
url: 'php_includes/server.php',
dataType: "json",
success: function(data) {
$("#rows").html(data.rows);
$("#min").html(data.min);
$("#max").html(data.max);
$("#mean").html(data.total);
$("#last").html(data.last_entry);
//Show gauge once json is received from server
var gage = new JustGage({
id: "gauge",
value: data.total,
min: data.min,
max: data.max,
title: "Sample Data"
});
$("#your_results").fadeIn("slow");
$("#your_data").fadeIn("slow");
//Scroll to Gauge
$('html, body').animate({
scrollTop: $('#results').offset().top
}, 'slow');
$("#gauge").fadeIn(slow);
}
});
}
});
myForm的
<form class="form-inline" action="" id="myform" form="" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="bill_cost"></label>
<div class="col-md-8">
<input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit1"></label>
<div class="col-md-4">
<input type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl" value="Submit">
</div>
</div>
</form>
结果显示在这里
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<!-- RESULTS HERE -->
<div id="your_results"></div>
<!-- .GAUGE HERE -->
<div id="gauge" class="300x260px"></div>
答
如果你正确地缩进代码的问题将变得明显:
$(function() {
$("#myform").validate({});
//Post the form if field has been completed
var formdata = $('#myform').serialize();
$.post('php_includes/insert.php', formdata,
function(data) {
//Reset Form
$('#myform')[0].reset();
fetchRowCount();
});
return false;
});
你包装一下你的验证功能在一个 $(handler)
(一个JQuery对象,当传递一个函数时,变成了$(document).ready(handler);
的简写。所以你在文档准备好的时候运行你的验证,而不是当你点击你的提交按钮时。
你可以显示你的标记吗? – Josh
我已经添加了希望帮助的表单。 – JulianJ