判断form表单每个input字段是否有内容
//---------------------------------------------------input失去焦点时判断是否有值
btn_click: function () {
//input失去焦点时判断是否有值 若没有 则不能点击保存
function Input_verification() {
//input的是否有内容
var input_val = null;
//是否能够点击保存
var canClick = false;
this.init = function (fo) {
//当前表单的按钮
var btn = fo.children('.form_btn').children('button');
//btn.attr('disabled',true).css('cursor',' not-allowed');
//input列表
fo.input = [];
//表单下的input
var input = fo.find('input');
var input_textarea = fo.find('textarea');
//把每个input放入数组
for (var i = 0; i < input.length; i++) {
if ((input[i].type == 'text')
|| ( input[i].type == 'number')
|| (input[i].type == 'password')
|| (input[i].type == 'email')
|| (input[i].type == 'search')
|| (input[i].type == 'tel')
|| (input[i].type == 'url')
|| (input[i].type == 'date')
|| (input[i].type == 'datetime')
|| (input[i].type == 'datetime-local')
|| (input[i].type == 'month')
|| (input[i].type == 'week')
|| (input[i].type == 'time')
) {
fo.input.push(input[i]);
}
}
//把每个textarea放入数组
if (input_textarea) {
for (var o = 0; o < input_textarea.length; o++) {
fo.input.push(input_textarea[o]);
}
}
inp_blur(fo.input);
btn_click(fo, btn, fo.input);
};
//给每个元素绑定失去焦点事件
var inp_blur = function (inp) {
for (var i = 0; i < inp.length; i++) {
$(inp[i]).blur(function () {
input_val = $(this).val();
//值为空提示信息
if (input_val == '') {
//this.placeholder = 1;
//console.log(this.parentNode.children[0]);
$(this).attr('placeholder', '内容不能为空').prev('i').css('color', 'red');
} else {
$(this).prev('i').css('color', '#e6e6e6')
}
})
}
};
//给每个提交按钮绑定点击事件
var btn_click = function (fo, btn, inp) {
var form_fo = fo;
var form_parent = $('.nominations form');
var result = '';
var url = '';
btn.click(function () {
//循环整个表单是否有input值为空
for (var k = 0; k < inp.length; k++) {
if (inp[k].value == '') {
canClick = false;
break;
} else {
canClick = true;
}
}
//若值都不为空,开放保存按钮点击权限
if (canClick) {
//如果是第一个form表单
if (form_fo.hasClass('hasID')) {
result = form_fo.serialize();
//获得ajax地址
url = form_fo.attr('form_url');
//取得用户登录ID
result += ('&user_id=' + form_fo.attr('user_id'));
$.ajax({
type: 'POST',
url: url,
data: result,
success: function (txt) {
if (txt.xinxi == '添加成功') {
//给第一个表单下面的所有表单添加属于该表单的uid
for (var u = 0; u < form_parent.length; u++) {
if (!$(form_parent[u]).hasClass('hasID')) {
$(form_parent[u]).attr('uid', txt.id);
}
}
//开放修改按钮
btn.parent().removeClass('form_btn_1').children('button').addClass('btn_top').siblings('div').css('display', 'block');
} else {
btn.html('添加失败');
}
}
})
//如果不是第一个form表单而且第一个表单已交互成功下发uid给下面的表单
} else if (form_fo.attr('uid')) {
result = form_fo.serialize();
result += ('&uid=' + form_fo.attr('uid'));
//获得ajax地址
url = form_fo.attr('form_url');
$.ajax({
type: 'POST',
url: url,
data: result,
success: function (obj) {
if (obj == '添加成功') {
//开放修改按钮
btn.parent().removeClass('form_btn_1').children('button').addClass('btn_top').siblings('div').css('display', 'block');
} else {
btn.html(obj);
}
}
})
} else if (form_fo.attr('user_id')) {
result = form_fo.serialize();
result += ('&id=' + form_fo.attr('user_id'));
//获得ajax地址
url = form_fo.attr('form_url');
$.ajax({
type: 'POST',
url: url,
data: result,
success: function (obj) {
if (obj == '修改成功') {
//开放修改按钮
btn.html(obj);
} else {
btn.html(obj);
}
}
})
}
} else {
for (var i = 0; i < inp.length; i++) {
if (inp[i].value == '') {
$(inp[i]).attr('placeholder', '内容不能为空').prev('i').css('color', 'red');
}
}
}
})
};
} var form_input = new Input_verification();
var form1 = $('#form1');
form_input.init(form1);
判断form表单每个input字段是否有内容的更多相关文章
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- ExtJs如何判断form表单是否被修改过详解
1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式) 相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- JQuery判断form表单是否为空
功能:通过jquery判断form表单中是否有内容还未填写,如果有未填写的,则阻止提交 $(function () { $('form').bind('submit',function () { / ...
- 常用6种type的form表单的input标签分析及示例
<input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...
- form表单 一个input时 回车自动提交
问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
随机推荐
- JavaScript---复选框反选全选
Script <script type="text/javascript"> /*直接使用document.getElementsByName("c1&quo ...
- springBoot 自定义redisTemplate
package com.atirm.mybatismutiplesource.config.RedisConfig; import com.atirm.mybatismutiplesource.ent ...
- nodeJs 安装 npm nodeModules package.json
Nodejs 1.安装nodejs 从nodejs官网下载最新版本的node,设置环境变量这样就可以在cmd下直接用命令行操作npm 环境变量:path d:/nodejs 查看本机node及n ...
- 「日常训练」Kefa and Company(Codeforces Round #321 Div. 2 B)
题意与分析(CodeForces 580B) \(n\)个人,告诉你\(n\)个人的工资,每个人还有一个权值.现在从这n个人中选出m个人,使得他们的权值之和最大,但是对于选中的人而言,其他被选中的人的 ...
- MATLAB实现连续周期信号的频谱分析(正余弦波信号举例)
关于MATLAB实现连续信号的频谱分析,以正余弦波信号频谱分析为例分析如下: 1.含有频率f ,2f和3f的正弦波叠加信号,即: 其中,f =500Hz.试采用Matlab仿真软件对该信号进行频谱分析 ...
- 【springmvc+mybatis项目实战】杰信商贸-5.生产厂家DAO+SERVICE+CONTROLLER+JSP+配置文件
上一篇我们创建了工程和一个Factory的po对象(javaBean),我们也写好了Mapper的映射文件,接下来我们来完成生产厂家的DAO与SERVICE,以及CONTROLLER,还有做显示的JS ...
- 【springmvc+mybatis项目实战】杰信商贸-2.数据库配置
首先我们来了解项目的架构 我们分别使用了MySql和Oracle数据库,即是异构数据库.我们做到一个平台支持多个数据库.数据库建模我们使用Sybase公司的PowerDesigner(以后简称PD), ...
- HDU 1394Minimum Inversion Number
The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...
- 零基础自学人工智能,看这些资料就够了(300G资料免费送)
为什么有今天这篇? 首先,标题不要太相信,哈哈哈. 本公众号之前已经就人工智能学习的路径.学习方法.经典学习视频等做过完整说明.但是鉴于每个人的基础不同,可能需要额外的学习资料进行辅助.特此,向大家免 ...
- Python3 标准库:calendar,time
1.calendar import calendar print(calendar.month(2008,8)) #某个月 print(calendar.calendar(2008)) #某年 pri ...