jquery - 提交表单后如何在就绪事件中传递函数
问题描述
我试图弄清楚如何提交表格,或者不提交,这取决于输入是否有效。由于我有很多条件,我想将它们作为函数,但是事情并没有按照我使用它的方式工作。
没有功能(工作): https ://jsfiddle.net/ba6xjm8d/3/
$(function() {
$("#Submit").click(function() {
// validate and process form here
var name = $("#Name").val();
if (name == "") {
return false;
}
var surname = $("#Surname").val();
if (surname == "") {
return false;
}
});
});
有功能(不工作) https://jsfiddle.net/9tq23b7g/1/
function isEmpty(elemInput){
var elem = $(elemInput).val();
if (elem == "") {
return false;
}
}
$(function() {
$("#Submit").click(function() {
// validate and process form here
isEmpty("#Name");
/*var name = $("#Name").val();
if (name == "") {
return false;
}*/
var surname = $("#Surname").val();
if (surname == "") {
return false;
}
});
});
有人可以解释一下如何正确编写这段不起作用的代码(以便我知道如何使用函数),并请给我一些解释为什么它不起作用。
谢谢!
编辑
基本上,如果我在控制台中逐个启动它,但是当我在准备好的内部调用它时,事情就可以正常工作-单击事件表单正在发送,无论是否返回错误参数。就像根本不承认一样。
这是整段代码:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form</title>
<!-- CSS links -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 1. Start Main Header -->
<header class="main-header" id="mainHeader">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1>Form</h1>
</div>
</div>
</div>
</header>
<!-- / 1. End Main Header -->
<!-- 2. Start Main Content -->
<main class="main-content">
<div class="container">
<div class="row">
<div class="register-form col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form method="post" action="https://www.google.com/" id="inputForm">
<!-- Name -->
<div class="form-group" id="nameFormGroup">
<label for="Name" class="control-label">Name</label>
<input type="text" name="name" class="form-control" id="Name" placeholder="Name" autofocus/>
</div>
<!-- Surname -->
<div class="form-group" id="surnameFormGroup">
<label for="Surname" class="control-label">Surname</label>
<input type="text" name="surname" class="form-control" id="Surname" placeholder="Surname"/ >
</div>
<!-- Submit Button -->
<div class="form-group">
<button type="submit" id="Submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
</main>
<!-- / 2. End Main Content -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JavaScript Validation JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script>
/* */
function printError(elemInput, elemFormGroup, msgErr){
$(elemFormGroup).removeClass("has-success has-feedback");
$(elemFormGroup).addClass("has-error has-feedback");
$(elemInput).after('<span class="glyphicon glyphicon-remove form-control-feedback"></span>');
$(elemInput).after('<span class="text-danger">' + msgErr +'</span>');
}
/* */
function printSuccess(elemInput, elemFormGroup){
$(elemFormGroup).removeClass("has-error has-feedback");
$(elemInput).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
$(elemFormGroup).addClass("has-success has-feedback");
}
/* This function is working if I try it in console, but not in this piece of code*/
function checkIsEmpty(elemInput, elemFormGroup){
var something = $.trim($(elemInput).val());
if (something == ""){
printError($(elemInput), $(elemFormGroup), 'Input form is empty');
alert("I have returned false");
return false;
} else {
printError($(elemInput), $(elemFormGroup));
}
}
$(document).ready(function() {
$("#inputForm").submit(function() {
var name = $.trim($("#Name").val());
var surname = $.trim($("#Surname").val());
$('.text-danger').remove();
$('.glyphicon').remove();
/*name*/
/*calling function*/
checkIsEmpty("#Name", "#nameFormGroup");
/* Tring to replace this piece of code as function that would be called outside ready-submit event */
/*name*/
/*
if (name == ""){
printError($("#Name"), $("#nameFormGroup"), 'Input form is empty');
return false;
} else {
printError($("#Name"), $("#nameFormGroup"));
}
*/
/*surname*/
if (surname == ""){
printError($("#Surname"), $("#surnameFormGroup"), 'Input form is empty');
return false;
} else {
printError($("#Surname"), $("#surnameFormGroup"));
}
// return false;
});
});
</script>
</body>
或者你在这里查看:https ://jsfiddle.net/cz6x8on2/
解决方案
您的问题是您没有对isEmpty
函数的返回做任何事情。
function isEmpty(elemInput){
var elem = $(elemInput).val();
if (elem == "") {
return false;
}
}
$(function() {
$("#Submit").click(function() {
// validate and process form here
isEmpty("#Name"); // not catching result of the call
// omitted.
});
});
如果要防止在 jQuery 中提交表单,处理函数必须返回false
. 这不是这里的情况。您可以通过将返回类型存储为变量并返回它来解决它。
$(function() {
$("#Submit").click(function() {
// validate and process form here
const val = isEmpty("#Name"); // not catching result of the call
// if name is empty then val is false -> no submit
if(!val) return false; // stops form submit
});
});
PS:功能行为与名称相矛盾。我希望它true
在未填写输入元素时返回。但是您返回false
. 这很令人困惑。true
如果输入为空,请重命名函数或返回。
编辑:花了一些时间来更新你的小提琴:https ://jsfiddle.net/cz6x8on2/8/
推荐阅读
- php - 如果未找到该字段,则显示文本消息,如果找到则不显示
- c# - 创建新标签页时如何在代码中克隆标签页内的所有内容
- node.js - 连接到 MongoDB Atlas 时如何修复“错误:querySrv EREFUSED”?
- javascript - 在 React 中打开一个模态弹出窗口
- postgresql - Postgresql:如何将它安装在 linux 服务器的不同位置?
- python - Keras:TensorFlow 1.3 模型在 TensorFlow 1.4 或更高版本下失败(错误预测)
- excel - 如何遍历名称集合并返回对象的大小?
- c# - Unity - 碰撞检测中的碰撞检测
- asp.net-core-mvc - 是否可以在同一个项目中保护范围(web api)和验证客户端(web app mvc)?
- java - 相同算法的 Java 和 Scala 之间的性能差异