在我的Jquery中添加removeClass函数

Question

我一直坚持这个问题超过一周-_-。我需要做的是在我的jQuery验证中添加removeclass函数。在bid和rfq验证中添加removeclass。

我有下拉列表和两个文本框（rfq和bid），当我在下拉列表中选择BIDDING时，出价文本框会隐藏。但问题是，当我尝试提交验证要求时，bcoz文本框出价没有价值。所以我尝试在textbox中添加一个removeclass函数取决于下拉值。

这是我的工作小提琴http://jsfiddle.net/mHCk7/4/

验证jQuery的一部分

if (bid == "") {
    $("span.val_bid").html("This field is required.").addClass('validate');
    validation_holder = 1;
}
else {
    if (!bid_regex.test(bid)) { // if invalid phone
        $("span.val_bid").html("Integer Only is Allowed!").addClass('validate');
        validation_holder = 1;
    }
    else {
        $("span.val_bid").html("");
    }
}
if (rfq == "") {
    $("span.val_rfq").html("This field is required.").addClass('validate');
    validation_holder = 1;
}
else {
    if (!rfq_regex.test(rfq)) { // if invalid phone
        $("span.val_rfq").html("Integer Only is Allowed!").addClass('validate');
        validation_holder = 1;
    }
    else {
        $("span.val_rfq").html("");
    }
}

删除类jquery

$('#txt1').change(function () {
    if ($(this).val() == 'NEGOTIATED' || $(this).val() == 'SHOPPING' || $(this).val() == '') {
        $("#txt2,#txt3").val('');
        $("#txt2").removeClass("mandatory");
        $("#txt3").removeClass("mandatory");
    }
    else if ($(this).val() == 'BIDDING') {
        $("#txt3").val('');
        $("#txt3").removeClass("mandatory");
    }
    else if ($(this).val() == 'RFQ') {
        $("#txt2").val('');
        $("#txt2").removeClass("mandatory");
    }
    else {
        //here you can specify what to do if the value is NOT negotiated or SHOPPING
    }
});

Answer 1

这是更新的代码

<script>var FormValidation = function(form){


         this.messages = {

            required    : 'This field should not be empty',
            email       : 'Please enter  valid email',
            number      : 'Please enter  valid number',
            min         : 'This field length should be minimum ',
            max         : 'This field length should not exceed ',
            range       : 'This field length between  '
        };

        validator = this;

        var currentmsg =this;

        this.required = function(value){
            var valid = (value.length > 0);
            return {status: valid, message: valid ? '' : currentmsg.messages.required};
        }

        this.email = function(value){
            var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ ;
            var valid = pattern.test(value);
            return { status:valid, message: valid ? '' : currentmsg.messages.email};
        }

        this.number = function(value){
            var pattern = /^[0-9]+/ ;
            var valid = pattern.test(value);
            return { status:valid, message: valid ? '' : currentmsg.messages.number};
        }

        this.min = function(value,args){
            if(value.length > 0){
                var valid = (value.length >= args[0])
                return { status:valid, message: valid ? '' : currentmsg.messages.min + args[0] };
            }
        }

        this.max = function(value,args){
                if(value.length > 0){
                    var valid = (value.length <= args[0])
                    return { status:valid, message: valid ? '' : currentmsg.messages.max + args[0] };
                }
            }

        this.range = function(value,args){
            var valid = (value.length >= args[0] && value.length <= args[1])
            return { 
                status:valid, 
                message: valid ? '' : currentmsg.messages.range + args[0] + ' and ' + args[1]
                };
        }

        this.validators = {
            required : validator.required,
            email    : validator.email,
            number   : validator.number,
            range    : validator.range,
            max      : validator.max,
            min      : validator.min 
        };

        this.validate = function(form){
            var elements = form.elements;
            console.log('elements', elements);
            var status = true;
            for(var i = 0; i < elements.length ; i++){
                var validate = elements[i].getAttribute('validate');
                if(!validate){      
                    continue;
                }
                var types = validate.split(' ');
                for(var j = 0; j < types.length; j++){
                    var result = this.validateField(elements[i], types[j]);
                    if(!result) { 
                        continue 
                    }
                    this.displayErrors(elements[i], result);
                    if(!result.status) {                            
                        status = false;
                        break;
                    }
                }
            }
            return status;
        }

        this.displayErrors = function(element, result){
            element.className = result.status ? '' : 'error';
            var elErr =element.errorMsg;
            if(elErr!=null)
                elErr.className = result.status ? '' :'valerr'
                if(!element.errorMsg){
                    elErr = document.createElement("span");
                    elErr.id = 'valerr';
                    element.parentNode.appendChild(elErr);
                    element.errorMsg = elErr;
                }
            elErr.innerHTML = result.message;
        }

        this.validateField = function (element, type){
            var validationType = type;
            var args ;
            if(type.indexOf("(")!= -1 && type.indexOf(")") != -1){
                var result = this.getArguments(type);
                validationType = result.type;
                args = result.argsList;
            }
            validator = this.validators[validationType];
            if(validator != null){
                return validator(element.value ,args);
            }
            return null;
        }

        this.getArguments = function(type){
            var validationtype = type.substring(0,type.indexOf("("));
            var args = type.substring(type.indexOf("(")+1,type.indexOf(")")).split(',');
            return { type : validationtype, argsList : args}
        }

        this.init = function() {
               var curForm = this;
               $('#register_form').on('submit', function(){
               console.log('valid',curForm.validate(this));
               return curForm.validate(this);
            });     
        }
}
function init() {

    var names = { 'BIDDING':'n_bid', 'RFQ': 'n_rfq' }       
            var p = $('#optional-field');
    var temp = $('<div>');
    addDynamicField = function(label){
          var label = $('<label>').text(label);
              var input = $('<input>').attr('type','text').attr('name',names[label]).attr('validate','required number');
      temp.empty().append(label).append(input);
              p.empty().html(temp.html());

    }
    hideDynamicField  = function() {
      p.empty();
    }
    $('#options').change(function(){
       var option = $(this).val();
       if(option == 'RFQ' || option == 'BIDDING'){
         addDynamicField($(this).val());    
       } else {
         hideDynamicField();    
       }    
    });

    addDynamicField('BIDDING','n_bid');

    var formValidation = new FormValidation();
    formValidation.init();

}init(); 

<div id="wrap"> <!--wrap start-->
    <div id="wrap2">  <!--wrap2 start-->

    <h2 class="free_account">Add Records</h2> 
<form action="po_insert.php" method="post" id="register_form"  name="register_form" >
    <div id="formFields">
       <p class="validate_msg">Please fix the errors below!</p>
    <p>
        <label for="">Mode of Procurement</label>
        <select name="n_mode" id="options" type="text">
            <option value="BIDDING">BIDDING</option>
            <option value="RFQ">RFQ</option>
            <option value="NEGOTIATED">NEGOTIATED</option>
            <option value="SHOPPING">SHOPPING</option>
        </select>
        <span class="val_mode"></span>
    </p>      
    <p id="optional-field"></p>
    <p> 
        <label for="">Quantity</label> 
        <input type="text" name="n_quantity" id="txtbox3" validate="required number">
    </p>
    <input type="submit" name="submit" value="Update" id="sbtBtn">
</form>

Answer 2

这里的问题实际上是在你的更改函数中调用了removeClass函数，但是在你的函数BID_RFQ（）之前，你正在为文本框隐藏可见性。

注释使您的其他部分隐藏可见性的代码..

function BID_RFQ()
{
if(document.register_form.n_mode.options[document.register_form.n_mode.selectedIndex].value=="BIDDING"){document.getElementById("bid").style.visibility='visible';document.getElementById("bid").style.overflow='visible';document.getElementById("rfq").style.visibility='hidden';document.getElementById("rfq").style.overflow='hidden';}
else if(document.register_form.n_mode.options[document.register_form.n_mode.selectedIndex].value=="RFQ"){document.getElementById("rfq").style.visibility='visible';document.getElementById("rfq").style.overflow='visible';document.getElementById("bid").style.visibility='hidden';document.getElementById("bid").style.overflow='hidden';}
    else{//document.getElementById("bid").style.visibility='hidden';//document.getElementById("bid").style.overflow='hidden';//document.getElementById("rfq").style.visibility='hidden';//document.getElementById("rfq").style.overflow='hidden';}return true;
}

Answer 3

使用validation_holder = 0;在你的其他部分和设定条件：

if(validation_holder == 1) { // if have a field is blank, return false
            $("p.validate_msg").slideDown("fast");
            return false;
        } 
        if(validation_holder == 0)
        {
         $("p.validate_msg").hide("slow");
        }

Answer 4

我可能会对这个问题进行一次尝试。在BID_RFQ（）中，您具有所有输入字段的隐藏/显示功能。您还可以做的是从输入字段添加/删除强制类，这些类应该/不应该具有它。即：

function BID_RFQ() {
    if($("#txt1").val() =="BIDDING"){
        $("#bid").css({visibility:'visible', overflow: 'visible'});
        $("#txt2").addClass("mandatory");
        $("#rfq").css({visibility:'hidden', overflow: 'hidden'});
        $("#txt3").removeClass("mandatory");
    if($("#txt1").val() =="RFQ"){
        $("#bid").css({visibility:'hidden', overflow: 'hidden'});
        $("#txt2").removeClass("mandatory");
        $("#rfq").css({visibility:'visible', overflow: 'visible'});
        $("#txt3").addClass("mandatory");
    } else {
        $("#bid").css({visibility:'hidden', overflow: 'hidden'});
        $("#txt2").removeClass("mandatory");
        $("#rfq").css({visibility:'hidden', overflow: 'hidden'});
        $("#txt3").removeClass("mandatory");
    }
    return true;
}

因此，这将帮助您确定在进行验证时是否需要每个输入。为简单起见，您甚至可以：

var rfq = $("form#register_form input[name='n_rfq']").val();
var rfq_regex = /^[0-9\-]+$/; // reg ex qty check
var rfq_mandatory =  $("#txt3").hasClass("mandatory");
var bid = $("form#register_form input[name='n_bid']").val();
var bid_regex = /^[0-9\-]+$/; // reg ex qty check
var bid_mandatory =  $("#txt2").hasClass("mandatory");

因此，在进行验证时，您可以：

if(bid == "" && bid_mandatory)
AND 
if(!bid_regex.test(bid) && bid_mandatory)

JS Fiddle can be found here.