Question

目前正在处理jquery日期选择器，如果用户输入其他正确日期格式的随机数，则错误消息将出现在顶部，警报将出现，然后红色边框将出现在文本字段中。使用我当前的代码我得到了这个完美但如果用户输入正确的日期errRed类和顶级标签消息没有隐藏。

这是我的代码

<span id="error_message" class="error_msge">

</span> 
<div>&nbsp;</div>
 <form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="education_health.html">
  <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field txt_Idt ipt_required" id="txt_Idt" name="txt_Idt" />
 </form>

这是我正在尝试的jquery代码

$('.txt_Idt').change(function (event) {
    var txtVal = $('.txt_Idt').val();
    //alert("check what" + txtVal);
    if (isDate(txtVal)) {
        $(".basicForm").validate().element(".txt_Idt");
        $(".basicForm").find(".txt_Idt").removeClass("errRed");
        event.stopImmediatePropagation();
    } else {
        alert('Kindly enter date in valid format');
        $("#txt_Idt").addClass("errRed");
        $(".txt_Idt").val("");
        $(".basicForm").validate().element(".txt_Idt");
        event.stopImmediatePropagation();
    }
    return false;
});

function isDate(txt_Idt) {
    var currVal = txt_Idt;
    if (currVal == '') return false;

    var rxDatePattern = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
    var dtArray = currVal.match(rxDatePattern); // is format OK?

    if (dtArray == null) return false;

    //Checks for mm/dd/yyyy format.
    dtMonth = dtArray[3];
    dtDay = dtArray[5];
    dtYear = dtArray[1];

    if (dtMonth < 1 || dtMonth > 12) return false;
    else if (dtDay < 1 || dtDay > 31) return false;
    else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) return false;
    else if (dtMonth == 2) {
        var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
        if (dtDay > 29 || (dtDay == 29 && !isleap)) return false;
    }
    return true;
}

我试过这样的事情

$(".basicForm").find(".txt_Idt").removeClass("errRed");

但仍未使用

提前致谢

Answer 1

更改活动

根据要更改的表单元素的类型以及用户与元素交互的方式，更改事件将触发

问题

当您从日历中选择日期时，交互的元素是datepicker而不是文本框。因此触发了datepicker（onSelect）的更改，而不是更改文本框的事件。

示例：JSFiddle。

代码

$("#txtTest").on("change", function() {
  console.log("changed");
});

$("#btnTest").on("click", function() {
  $("#txtTest").val("Button Clicked");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="txtTest">
<button id="btnTest">Update Text</button>

解决方案

要处理此事件，我们必须在onSelect datepicker事件

上触发我们的更改事件

$("#txt_Idt").trigger("change");

Updated fiddle

参考

Change Event

Answer 2

如果从代码中删除以下语句（存在2次），它将起作用：

$(".basicForm").validate().element(".txt_Idt");

Answer 3

当你找到一个类的元素时，你需要在元素之间进行交互。

看看这个功能：

function serializeForm(idForm, submitHidden) {

// Clona o form para remover as mascaras e submeter.
var formSubmit = $('#' + idForm).clone();

// Todos os campos do form Original
var campos = $('#' + idForm).find(':input');

// Todos os campos do form clonado
var camposSubmit = formSubmit.find(':input');

// Seleciona os campos que estão em divs ocultas.
var camposDesabilitados = $('#' + idForm).find("div:hidden").find(":input");

// Campos alterados dinamicamente (ajax) precisam ser copiados
// (o clone copia o valor original renderizado no HTML).
for (var i = 0; i < campos.length; i++) {

    camposSubmit[i].value = campos[i].value;

    // se os campos hidden não devem ser submetidos
    if (submitHidden) {
        $(camposSubmit[i]).attr("disabled", false);
    }
    else {

        // Bloqueia os campos que estão em divs ocultas.
        if (camposDesabilitados.filter($(campos[i])).length != 0) {

            // se os campos hidden não devem ser submetidos
            $(camposSubmit[i]).attr("disabled", true);
        }
        else {

            $(camposSubmit[i]).attr("disabled", false);
        }
    }
}

// Remove as mascaras de moeda e percentual (mascaras de data, cpf, cnpj e
// cep sao submetidas e removidas server-side);
formSubmit.find(':input[type="text"]').filter('.money, .percentage').each(
        function() {
            $(this).val($(this).maskMoney('unmasked')[0]);
        });

return formSubmit.serialize();

}

正如您所看到的，每当我们使用.find（）

时，此功能都会互动

使用jquery在文本字段中输入正确的日期格式后，错误类不会删除

3 个答案:

更改活动

问题

代码

解决方案

参考