双击提交按钮时,请删除父班



当我放置错误的输入并提交表单显示错误消息并将类添加到父级时,但是当我在提交按钮上再次单击时,它会删除父类(而不是错误消息(。因此,如果显示错误消息,我不想删除父类。

以下是代码

验证错误即将到来的地方,我将一个类添加给他的父母(即无效输入(,并将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。

查看您的正则罚款。

最新更新