Question

这可能是一个简单的问题，但对我而言并非如此。我有一个表格，其中有一个电话号码字段，我有JS来将用户限制为某种格式。问题是当他们输入的数字少于10位时，仍然允许他们提交。这是我的js：

 $('#phone-number')

            .keydown(function (e) {
                var key = e.which || e.charCode || e.keyCode || 0;
                $phone = $(this);

                // Don't let them remove the starting '('
                if ($phone.val().length === 1 && (key === 8 || key === 46)) {
                    $phone.val('(');
                    return false;
                }
                // Reset if they highlight and type over first char.
                else if ($phone.val().charAt(0) !== '(') {
                    $phone.val('(' + String.fromCharCode(e.keyCode) + '');
                }

                // Auto-format- do not expose the mask as the user begins to type
                if (key !== 8 && key !== 9) {
                    if ($phone.val().length === 4) {
                        $phone.val($phone.val() + ')');
                    }
                    if ($phone.val().length === 5) {
                        $phone.val($phone.val() + ' ');
                    }
                    if ($phone.val().length === 9) {
                        $phone.val($phone.val() + '-');
                    }
                }

                // Allow numeric (and tab, backspace, delete) keys only
                return (key == 8 ||
                    key == 9 ||
                    key == 46 ||
                    (key >= 48 && key <= 57) ||
                    (key >= 96 && key <= 105));
            })

            .bind('focus click', function () {
                $phone = $(this);

                if ($phone.val().length === 0) {
                    $phone.val('(');
                }
                else {
                    var val = $phone.val();
                    $phone.val('').val(val); // Ensure cursor remains at the end
                }
            })

            .blur(function () {
                $phone = $(this);

                if ($phone.val() === '(') {
                    $phone.val('');
                }
            });

这是电话号码框：

<div class="form-group">
        @Html.LabelFor(m => m.phoneNumber)
        @Html.TextBoxFor(m => m.phoneNumber, new { @class = "form-control", minlength = "5", oncopy = "return false", onpaste = "return false",
       id = "phone-number" ,name = "phone-number", type = "text", maxlength = "14" , placeholder = "(XXX) XXX-XXXX"
   })
    </div>

这是Submit btn

<button type="submit" class="btn btn-primary" value="Results" id="Submit" disabled="disabled" >Submit</button>

我不知道您是否需要此信息，但是此选项在用JS填充方框后启用提交btn

 $("input[type=text]").keyup(function () {

            if
            (
                $("#firstName").val().trim().length !== 0 &&
                $("#lastName").val().trim().length !== 0 &&
              //  $("#phoneNumber").val().trim().length !== 0 &&
                $("#address").val().trim().length !== 0
            ) {

                $("#Submit").removeAttr("disabled");
                $("#Submit").addClass("btn--primary");
            } else {
                $("#Submit").attr("disabled", "disabled");
            }
        });

谢谢，很抱歉，这是一个简单的问题，但是我在很多地方都尝试过。

Answer 1

您想要做的是阻止表单提交。您可以通过将一个on Submit事件附加到表单及其内的preventDefault来完成此操作。例如：

$('#FORM_ID').submit(function (e) {
    if ($('#phone-number').val().replace(/[^\d]/g,'').length < 10){ // check if phone number is less than 10 digits
        // phone number is less than 10 digits, prevent form submission
        e.preventDefault()
        return false
    }
})

让我知道您是否有任何疑问！

这是我对电话号码输入（$('#phone-number').val().replace(/[^\d]/g,'').length < 10）进行验证的方式：

我得到输入的电话号码的值：$('#phone-number').val()
我删除了不是数字replace(/[^\d]/g,'')的所有字符
然后我得到结果数字的长度。如果少于10，我将阻止通过e.preventDefault()

注意：您必须将#FORM_ID替换为您要运行此验证的表单的ID。

Answer 2

您是否考虑过使用带有type="tel"和pattern属性的输入？它不会像您要求的那样禁用“提交”按钮，但是可以根据特定模式验证用户输入。

下面是使用模式的一些输入示例。第一个可以接受10位数字，第二个可以接受10位或更多数字，第三个可以接受类似于您输入的占位符的严格格式：

<form>
  <input type="tel" pattern="[0-9]{10}" placeholder="Exactly 10 digits"><br>
  <input type="tel" pattern="[0-9]{10,}" placeholder="10 digits or more"><br>
  <input type="tel" pattern="\([0-9]{3}\) [0-9]{3}-[0-9]{4}" maxlength="14" placeholder="(123) 456-7890"><br>
  <input type="submit">
</form>

Answer 3

感谢您的帮助，但对我来说，这是最好，最简单的方法。 //如果“电话号码”框小于

，此脚本将阻止用户提交

function validatePhone() {
        var phoneNumberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
        var phoneNumber = $("#phone-number").val();
        if (phoneNumberPattern.test(phoneNumber)) {

            return true;
        }
        return false;


    }
    //Here we make sure that all boxes are filled then Submit.
    $("input[type=text]").keyup(function () {

        if
        (

            validatePhone()
        ) {

            $("#Submit").removeAttr("disabled");
            $("#Submit").addClass("btn--primary");
        } else {
            $("#Submit").attr("disabled", "disabled");
        }
    });

//这是提交btn

   <div class="form-group">
        <button type="submit" class="btn btn-primary" value="Results" id="Submit" disabled="disabled">Submit</button>
    </div>

禁用提交btn

3 个答案: