判断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& ...
随机推荐
- Hibernate-关系映射
1.为什么用Hibernate框架: java程序数据保存的变化: * 内存存在:java基础中, 数据保存在内存中,只在内存中暂时存在 * 文件保存:有io/流之后,数据可以保存到文件中 * 数据库 ...
- Netty概述
一,介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一 ...
- LeetCode:43. Multiply Strings (Medium)
1. 原题链接 https://leetcode.com/problems/multiply-strings/description/ 2. 题目要求 给定两个String类型的正整数num1.num ...
- MySQL高级-慢查询日志
一.慢查询日志是什么 1. 2. 3. 2.开启了慢查询日志后,什么样的SQL才会记录到慢查询日志里面呢? 3.案例 1.查看当前多少秒算慢 2.设置慢的阙值时间 3.为什么设置后看不出变化? 4.记 ...
- 「专题训练」Boredom(CodeForces Round #260 Div.1 A)
题意(Codeforces-455A) 给你\(n\)个数,你每次可以选择删除去一个数\(x\)获得\(x\)分,但是所有为\(x+1\)和\(x-1\)的数都得删去.问最大获得分数. 分析 这是一条 ...
- Siki_Unity_1-9_Unity2D游戏开发_Roguelike拾荒者
Unity 1-9 Unity2D游戏开发 Roguelike拾荒者 任务1:游戏介绍 Food:相当于血量:每走一步下降1,吃东西可以回复(果子10药水20),被怪物攻击会减少中间的障碍物可以打破, ...
- 【WXS全局对象】Math
Math对象用于执行数学任务. 属性: 名称 说明 Math.E 代表算术常量 e,即自然对数的底数,其值近似于 2.71828. Math.LN10 就是 loge10,即 10 的自然对数,其值近 ...
- 树(Tree,UVA 548)
题目描述: 题目思路: 1.使用数组建树 //递归 2.理解后序遍历和中序遍历,建立左右子树 3.dfs深度搜索找出权重最小的路径 #include <iostream> #include ...
- CPU设计学习-流水线
各种名词 标量流水线 超级流水线 超标量流水线与多发射技术 经典五级流水线 IF |Instruction Fetch,取指 ID |Instruction Decode,译码 EX |Execute ...
- 将System.Drawing.Bitmap转换为Direct2D.D2DBitmap
最近在尝试Direct2D编程,挺好玩的. 但是有时候还是会用到GDI+来生成图片,但D2D绘图需要用到自己的D2DBitmap类. 因此需要转换,查阅了下网上的资料,写了这么一个方法: using ...