使用js冲突进行表单验证

Form validation using js conflict

本文关键字：表单 验证 js 冲突 使用      更新时间：2023-09-26

在使用java脚本验证表单时，如果用户不输入任何信息并按下回车按钮，则会在下拉列表中显示红色边框。但在输入此信息后，它再次显示红框。请帮我解决这个问题。

if(qty_val > 0)
{
    if(jq(this).val() == "Choose One" || jq(this).val() == "Please Select if Ordering" || jq(this).val() == "Please Choose Color" )
    {
        var errorMsg = attr_name.replace("vwattr"+attr_nbr+"_",""); 
        alert("Please select proper "+errorMsg+" in related Items");
        jq(this).css("border", "1px solid red").focus();
        event.preventDefault();
        return false;
    }
}

在元素上添加和删除类（即has-error）会更简单，因此您可以通过删除类来保留它的早期设置。简化示例：

CSS：

.has-error {
    border: 1px solid red;
}

JS:

$('#test').click( function() {
    if($('#myinput').val() == "Write Something") {
        $('#myinput').addClass('has-error');
        event.preventDefault();
        return false;
    } else {
        $('#myinput').removeClass('has-error');
    }
});

请参阅此处的简单示例：http://jsfiddle.net/daLdmgub/

相关文章：