如果元素为空，则 JQuery 表单验证和类更改答案

【问题标题】：JQuery form validation and class change if elements are empty如果元素为空，则 JQuery 表单验证和类更改
【发布时间】：2014-01-05 05:52:08
【问题描述】：

我不是 JQuery 专家。尝试了 3 天后，除了寻求帮助，我别无选择。

我有一个动态表单，它通过 jquery/ajax 获取元素（输入、选择、单选、文本区域）。

现在，我想简单地验证表单。如果元素为空，则不会提交表单，并且会在空元素中添加 Bootstrap 类“错误”。如果没有一个元素是空的，那么表单将被提交到所需的 php 页面。

这是我到目前为止所做的

if (($(this).attr("category")) || ($(this).attr("vcmodel"))) {
    if ($('#category').length) {
        $('#category').addClass('error');
    }
    if ($('#vcmodel').length) {
        $('#vcmodel').addClass('error');
    }
    if ((($(this).attr("category")) && ($('#category').length)) || (($(this).attr("vcmodel")) && ($('#vcmodel').length))) {
        return false;
    }
}

【问题讨论】：

您能告诉我们您的尝试吗？也许准备一把小提琴？
您好，我已添加代码。请检查我的问题。

标签： javascript php jquery html forms

【解决方案1】：

好吧，只是给你一个想法，也许你可以这样做：

$("#submit").on("click", function(e) {
    var category = $("#category");
    if(category.val() === "") {
        category.addClass("error");

        // don't submit !
        e.preventDefault();
    }
});

这是fiddle

【讨论】：

【解决方案2】：

你可以试试 Jquery 验证插件。否则你会尝试这种方法。

$(document).ready(function(){
    $(document).on('submit','form',function(e){
        e.preventDefault();
        var $this = $(this);
        var valid;
        valid = true;
        $('.yourInputClass').each(function(){
            var value = $(this).val();
            if(value == ''){
                valid = false;
                $(this).addClass('error');              
            }
        });
        if(valid){
            $this.submit();
        }
    });
});

【讨论】：

您好，感谢您的回答。但它不起作用。此外，当我单击提交按钮时，表单正在发送到操作页面！
你可以试试这样的方法。 $("body" ).on( "click", "form input.submit", function(e) {
还是不行！当所有字段为空时，表单仍在提交中。
首先检查您的javascript代码是否正常工作。复制粘贴此代码。 $(document).on('submit','form',function(e){ e.preventDefault(); alert('ok') });