Question

我正在尝试限制带有字符和数字的文本框。
当我尝试在project name字段中输入数字时，它应该为该字段添加error box。同样，当我开始输入时应隐藏有效的项目名称error box 但它不起作用。为什么？

$(document).ready(function () {
    
    $('.onlyAlphabets').keypress(function (e) {
        debugger
        var regex = new RegExp("^[a-zA-Z ]+$");
        var str = String.fromCharCode(e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            $(this).removeClass('error')
            return true;
        }
        else {
            $(this).addClass('error')
            e.preventDefault();
            return false;
        }
    });
    $('.onlyNumeric').keypress(function (event) {
        var charCode = (event.which) ? event.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false
        }
        else {         
            return true;
        }
  
});
});

.error{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Project Name<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="name" class="form-control onlyAlphabets projectName required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Client Name<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="client" class="form-control onlyAlphabets clientName required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">On site Co-ordinator<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="onsite_coordinator" class="form-control onlyAlphabets onsiteCoOrd required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Duration(In months)<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="duration" class="form-control onlyNumeric duration required"></label>
                </div>

Answer 1

而不是添加错误框只是您可以限制该字段中的数字。因为您在Keypress事件中编写了该函数。因此，在按下有效字符之前，它将显示错误

所以，只需简单地限制这些字段中的数字，就像你为持续时间

所做的那样

$(document).ready(function () {
    
    $('.onlyAlphabets').keypress(function (e) {
        debugger
        var regex = new RegExp("^[a-zA-Z ]+$");
        var str = String.fromCharCode(e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            
            return true;
        }
        else {
            
            e.preventDefault();
            return false;
        }
    });
    $('.onlyNumeric').keypress(function (event) {
        var charCode = (event.which) ? event.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false
        }
        else {         
            return true;
        }
  
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Project Name <span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="name" class="form-control onlyAlphabets projectName required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Client Name<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="client" class="form-control onlyAlphabets clientName required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">On site Co-ordinator<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="onsite_coordinator" class="form-control onlyAlphabets onsiteCoOrd required"></label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin">
                    <label class="displayBlock">Duration(In months)<span class="reqField">*</span></label>
                    <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="duration" class="form-control onlyNumeric duration required"></label>
                </div>

在按键功能

1 个答案: