如何在表单提交前进行验证和显示消息？
如何在表单提交前进行验证和显示消息？
提问于 2015-12-29 03:16:53
我有多行类型为number的HTML输入元素。每一行有四个输入字段，我想添加验证，这样任何输入字段都不应该允许小于其左侧(在同一行中)的字段的值。
我想为每一行添加相同的验证。
我想在表单提交和显示错误消息之前进行此验证。(在单击表单提交/提交按钮之前)
最左边的一行不应该允许小于零的值(因为它的左边没有任何输入字段)。
您能建议我如何使用示例jsfiddle：Error message when text field has a value out of range来完成此操作吗？
(我尝试使用"input“标签中的"min”选项来完成此操作，但只有在单击submit按钮后才起作用。)
与fiddle中的代码相同：
<html>
<head>
<title>TestPage</title>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
addPlusSign();
$(".btn1").click(function(){
$(".expand1").toggle();
var btn1Text = $(".btn1").text();
if(btn1Text.indexOf("+") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '-');
$(".btn1").text(temp);
} else if (btn1Text.indexOf("-") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '+');
$(".btn1").text(temp);
}
});
})
function addPlusSign(){
if($(".expand1")){
var btn1Text = $(".btn1").text();
$(".btn1").text(btn1Text + " [+]");
}
}
$(function () {
$('.admin-form')
//we need to save values from all inputs with class 'admin-input'
.find(':input.admin-input')
.each(function () {
//save old value in each input's data cache
$(this).data('oldValue', $(this).val())
})
.end()
.submit(function (ev) {
var changed = false;
$(':input.admin-input', this).filter(function () {
if($(this).val() != $(this).data('oldValue')){
changed = true;
}
});
if($(this).hasClass('changed') && (!changed)){
alert("None of the thresholds were changed!");
ev.preventDefault()
}
if($(this).hasClass('changed') && changed){
var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
if (!allowSubmit)
ev.preventDefault()
}
});
});
$(document).on('input', '.admin-input', function(){
$(this).closest('form').addClass('changed');
});
</script>
<style>
.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:95%;
font-weight:normal;
}
#button1{
position: relative;
top:50px;
left:35%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
#button2{
position: relative;
top:50px;
left:50%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
input[type=number] {
max-width: 50px;
}
html {
overflow-y: scroll;
}
</style>
</head>
<body>
<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<br />
<br />
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td class="btn1" style="padding:0 30px 0 0;"><b>Row1 (%)</b></td>
<td><</td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="row1_good_high", value="5", size="3", maxlength="3"></td>
<td><input type="number", class="admin-input", name="row1_warning_low", value="5", size="3", maxlength="3"></td>
<td>-</td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="row1_warning_high", value="15", size="3", maxlength="3"></td>
<td>></td>
<td style="padding:0 10px 0 0"><input type="number", class="admin-input", name="row1_critical_low", value="15", size="3", maxlength="3"></td>
</tr>
<tr>
<td align="center" class="expand1">Sub Row</td>
<td class="expand1"><</td>
<td class="expand1"><input type="number", name="row1_good_high_Sub Row", value="5", size="3", maxlength="3"></td>
<td class="expand1"><input type="number", name="row1_warning_low_Sub Row", value="5", size="3", maxlength="3"></td>
<td class="expand1">-</td>
<td class="expand1"><input type="number", name="row1_warning_high_Sub Row", value="15", size="3", maxlength="3"></td>
<td class="expand1">></td>
<td class="expand1"><input type="number", name="row1_critical_low_Sub Row", value="15", size="3", maxlength="3"></td>
</tr>
</table>
</div>
<div style="clear:both">
<input type="submit" onclick="return confirm('Are you sure you want to submit the change?')" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
<input title="Set thresholds to baseline thresholds" type="submit" onclick="return confirm('Are you sure you want to set all thresholds to the baseline thresholds?')" name="resetButton" value="Reset" id="button2" style="height:50px; width:100px"/>
</div>
</form>
</body>
</html>回答 2
Stack Overflow用户
发布于 2015-12-29 05:44:07
http://jqueryvalidation.org/你可以像这样定义依赖关系：
$(".selector").validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $("#contactform_email").is(":checked");
}
}
}
}
});Stack Overflow用户
发布于 2016-01-05 02:19:21
感谢你们的回复，Yaco和miralong。
最后，我想出了下面的方法来做我想要的：
<html>
<head>
<title>TestPage</title>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
addPlusSign();
$(".btn1").click(function(){
$(".expand1").toggle();
var btn1Text = $(".btn1").text();
if(btn1Text.indexOf("+") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '-');
$(".btn1").text(temp);
} else if (btn1Text.indexOf("-") > -1){
var temp = btn1Text.replace(/\+|\-/ig, '+');
$(".btn1").text(temp);
}
});
$('[id^="number"]').focusout(function() {
var current_field_name = this.id;
if (current_field_name.indexOf("_1") > -1) {
var good_high = Number(document.getElementById(current_field_name).value);
if (good_high < 0) {
alert(good_high + " is out of valid range!");
document.getElementById(current_field_name).focus();
}
} else if (current_field_name.indexOf("_2") > -1) {
var warning_low = Number(document.getElementById(current_field_name).value);
var previous_field_name_1 = current_field_name.replace(/2$/, "1");
var good_high = Number(document.getElementById(previous_field_name_1).value);
if (warning_low < good_high) {
alert(warning_low + " is out of valid range!");
document.getElementById(current_field_name).focus();
}
} else if (current_field_name.indexOf("_3") > -1) {
var warning_high = Number(document.getElementById(current_field_name).value);
var previous_field_name_1 = current_field_name.replace(/3$/, "1");
var good_high = Number(document.getElementById(previous_field_name_1).value);
var previous_field_name_2 = current_field_name.replace(/3$/, "2");
var warning_low = Number(document.getElementById(previous_field_name_2).value);
if (warning_high < warning_low) {
alert(warning_high + " is out of valid range!");
document.getElementById(current_field_name).focus();
}
} else if (current_field_name.indexOf("_4") > -1) {
var critical_low = Number(document.getElementById(current_field_name).value);
var previous_field_name_1 = current_field_name.replace(/4$/, "1");
var good_high = Number(document.getElementById(previous_field_name_1).value);
var previous_field_name_2 = current_field_name.replace(/4$/, "2");
var warning_low = Number(document.getElementById(previous_field_name_2).value);
var previous_field_name_3 = current_field_name.replace(/4$/, "3");
var warning_high = Number(document.getElementById(previous_field_name_3).value);
if (critical_low < warning_high) {
alert(critical_low + " is out of valid range!");
document.getElementById(current_field_name).focus();
}
}
});
})
function addPlusSign(){
if($(".expand1")){
var btn1Text = $(".btn1").text();
$(".btn1").text(btn1Text + " [+]");
}
}
$(function () {
$('.admin-form')
//we need to save values from all inputs with class 'admin-input'
.find(':input.admin-input')
.each(function () {
//save old value in each input's data cache
$(this).data('oldValue', $(this).val())
})
.end()
.submit(function (ev) {
var changed = false;
$(':input.admin-input', this).filter(function () {
if($(this).val() != $(this).data('oldValue')){
changed = true;
}
});
if($(this).hasClass('changed') && (!changed)){
alert("None of the thresholds were changed!");
ev.preventDefault()
}
if($(this).hasClass('changed') && changed){
var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
if (!allowSubmit)
ev.preventDefault()
}
});
});
$(document).on('input', '.admin-input', function(){
$(this).closest('form').addClass('changed');
});
</script>
<style>
.expand1 { display: none;
}
.btn1 { cursor: pointer;
}
body {
background-color: rgb(255,255,255);
font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
border: none;
border-collapse: collapse;
font-size:95%;
font-weight:normal;
}
#button1{
position: relative;
top:50px;
left:35%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
#button2{
position: relative;
top:50px;
left:50%;
color: white;
background-color: rgb(0,89,132);
font-weight: bold;
}
input[type=number] {
max-width: 50px;
}
html {
overflow-y: scroll;
}
</style>
</head>
<body>
<form id="form1" method="post" class="admin-form">
<div style="float:left; width:50%">
<br />
<br />
<table id="t02" class="table2">
<tr>
<th style="padding:0 30px 0 0;"></th>
<th></th>
<th style="padding:0 10px 0 0;">Green</th>
<th colspan="3" style="padding:0 10px 0 0">Yellow</th>
<th></th>
<th style="padding:0 10px 0 0">Red</th>
</tr>
<tr>
<td style="padding:0 30px 0 0;">Row1</td>
<td><</td>
<td style="padding:0 10px 0 0"><input type="number", name="row1_good_high", value="30", size="3", maxlength="3", id="number42_1"></td>
<td><input type="number", name="row1_warning_low", value="30", size="3", maxlength="3", id="number42_2"></td>
<td>-</td>
<td style="padding:0 10px 0 0"><input type="number", name="row1_warning_high", value="60", size="3", maxlength="3", id="number42_3"></td>
<td>></td>
<td style="padding:0 10px 0 0"><input type="number", name="row1_critical_low", value="60", size="3", maxlength="3", id="number42_4"></td>
</tr>
<tr>
<td style="padding:0 30px 0 0;">SubRow</td>
<td><</td>
<td style="padding:0 10px 0 0"><input type="number", name="subrow_good_high", value="30", size="3", maxlength="3", id="number12_1"></td>
<td><input type="number", name="subrow_warning_low", value="30", size="3", maxlength="3", id="number12_2"></td>
<td>-</td>
<td style="padding:0 10px 0 0"><input type="number", name="subrow_warning_high", value="60", size="3", maxlength="3", id="number12_3"></td>
<td>></td>
<td style="padding:0 10px 0 0"><input type="number", name="subrow_critical_low", value="60", size="3", maxlength="3", id="number12_4"></td>
</tr>
</table>
</div>
<div style="clear:both">
<input type="submit" onclick="return confirm('Are you sure you want to submit the change?')" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
<input title="Set thresholds to baseline thresholds" type="submit" onclick="return confirm('Are you sure you want to set all thresholds to the baseline thresholds?')" name="resetButton" value="Reset" id="button2" style="height:50px; width:100px"/>
</div>
</form>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34499361
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号