当我放置错误的输入并提交表单显示错误消息并将类添加到父级时,但是当我在提交按钮上再次单击时,它会删除父类(而不是错误消息(。因此,如果显示错误消息,我不想删除父类。
以下是代码
验证错误即将到来的地方,我将一个类添加给他的父母(即无效输入(,并将CSS应用于标签和输入字段(即制作红色和红色边框(。因此,我将jQuery放入了变量,因为我正在使用它单个文件中多次。
var addValidation = function(currentSelector){
$(currentSelector).parents('.form-group').addClass('error-field');
}
var removeValidation = function(currentSelector){
$(currentSelector).parents('.form-group').removeClass('error-field');
}
之后,写了一个函数来验证输入字段
function validateinput(){
var error = 0;
var ytregex = /^[a-z0-9/]+$/i;
var channelName = $(".utube input").val();
if(channelName.length != 0 && channelName.length < 2 || channelName.length >= 41){
$('#ChannelError').html('Channel name length must be between 2 and 40 characters');
addValidation(this);
error = 1;
return error;
}
if(ytregex.test(channelName) || channelName == ''){
$('#ChannelError').html('');
removeValidation(this);
}else{
error = 1;
$('#ChannelError').html('Invalid Youtube Channel Name');
addValidation(this);
}
return error;
}
并将所有类似功能放入一个函数
function validateForm(){
var error = 0;
error += validateinput();
return error;
}
最终使用Ajax和保存数据提交表单。
首先单击ChannelName变为'无效YouTube频道名称'
第二次单击此代码ytregex.test(ChannelName(返回true。
查看您的正则罚款。