判断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& ...
随机推荐
- 封装List集合一个批量导入数据库的工具类
public class CommonDal { #region 数据导入相关 /// <summary> /// 批量导入数据 /// </summary> /// < ...
- C#原型模式
如下: [Serializable] public class ModelNewTable : ICloneable { public object Clone() { using (var stre ...
- python3 小实践(一)——selenium获取的cookie传递
from selenium import webdriver from time import sleep import requests import pickle #获取登录后的cookies c ...
- postman使用感言
这段时间接口测试一直使用的postman,一款谷歌接口测试插件,感受如下 优点: 1.对于中小型公司来说应该是够用的,特别是一键接口环境切换,一键设置header,作为一般的接口测试来说已经很不错了, ...
- 第三篇 JavaScript基础
知识预览 BOM对象 DOM对象(DHTML) 实例练习 转:https://www.cnblogs.com/yuanchenqi/articles/5980312.html#_label2 一.Ja ...
- GIt学习第一天之安装和版本库创建
搬运自 ‘廖雪峰的官方网站’ 1.git安装 官网下载地址:https://git-scm.com/download/win 百度网盘下载地址:https://pan.baidu.com/s/1k ...
- sqlserver错误126解决方法
是不是很尴尬! 华丽的分割线下便是解决方法: 1.打开sqlserver配置管理器. 2.选择sqlserver网络配置,并禁用VIA协议确定保存. 3.在服务里面启动[SQL Server (SQL ...
- 100. Remove Duplicates from Sorted Array && 101. Remove Duplicates from Sorted Array II [easy]
这两题类似,所以放在一起,先看第一题: Description Given a sorted array, remove the duplicates in place such that each ...
- ThreadLocal 线程的私有内存
话说在<操作系统原理>这门课里面,我们学到了很多概念:进程.线程.锁.PV操作.读写者问题等等,大家还记得么?(估计有些概念早已忘记了吧,哈哈哈~) 其中关于进程.线程和锁的东西是我们平时 ...
- truffle运行特殊 无法找到module的处理方法
https://blog.csdn.net/SnWJy/article/details/80549227 错误描述: truffle项目根目录执行truffle compile时,报错'modul ...