Question

这是我的JQuery代码：

$(document).ready(function()
{
    $("#prod_response").hide();
    $("#upload").click(function()
        {
            proceed = true;
            $("input[type='text'], input[type='file'], input[type='number'], select, textarea").each(function()
                {
                    if(!$(this).val())
                        {
                           $("#prod_response").html("Some Fields Are Empty Please Enter All the Data Given In the Form For Proper Product Approval").slideDown("slow");
                           proceed = false;
                           return false;
                        }
                });

            if(proceed)
                {
                    alert("done");
                //  var form = new FormData($('#prod_add_form')[0]);
             //        $.ajax({
                            //  url: "upload",
                            //  type: "POST",
                            //  data: form,
                            //  cache: false,
                   //              contentType: false,
                   //              processData: false,
                            //  success:function(data)
                            //      {
                            //          alert(data);
                            //      },
                            //  error:function(data){
                            //      alert(data);
                            //  }
                            // });
                }
        });

    $("body").on("click", "input[type='text'], input[type='file'], input[type='number'], select, textarea",function()
        {
            if($("#prod_response").hasClass("text-danger"))
                {
                    $(this).removeClass("text-danger");
                    setTimeout(function()
                    {
                        $('#prod_response').slideUp('slow');
                    }, 50);
                }
        });
});

这是我的HTML代码：

<form enctype="multipart/form-data" id="prod_add_form">
<div class="panel panel-primary">
    <div class="panel-heading text-left text-uppercase"><i class="ion ion-navigate"></i> &nbsp;&nbsp;Add Products Panel </div>
    <div class="panel-body">
        <div class="form-group col-md-4">
            <label for="prod_category">Product Category?</label>
            <select name="prod_category" class="form-control">
                <option value="" selected disabled>Select Product Category</option>
                <?php $product->listCategories(); ?>
            </select>
        </div>
        <div class="form-group col-md-3">
            <label for="prod_discount">Product Discount</label>
            <input type="text" class="form-control" name="prod_discount" placeholder="Enter Product's Discount">
        </div>
        <div class="form-group col-md-3">
            <label for="prod_stock">How Many Product's in Stock?</label>
            <input type="number" class="form-control" name="prod_stock" placeholder="Enter Product's Discount">
        </div>
        <div class="form-group col-md-12">
            <label for="prod_description">Enter a brief description about your product that will explain the details of your product to the customers more precisely.</label>
            <textarea rows="3" class="form-control" name="prod_description" placeholder="Ex: Enter brief description about your products like you can specify speciality of product, features of the product."></textarea>
        </div>
        <div class="form-group col-md-12">
            <label for="prod_description">Please Select Your Product Images To Make it Online</label>
            <input type="file" accept="image/*" multiple name="img[]" id="image" />
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center text-danger" id="prod_response">Some Fields Are Empty Please Enter All the Data Given In the Form For Proper Product Approval</div>
    </div>
    <div class="panel-footer">
        <input type="submit" class="btn btn-success btn-block text-uppercase" id="upload" value="Upload Product Details" />
    </div>
</div>

我有以下html和jquery代码，我想要实现的是我试图通过Jquery检查我提供的所有输入是否由用户填充。

尽管我没有将任何字段留空，但在运行代码后，它只执行此代码

if(!$(this).val())
{
   $("#prod_response").html("Some Fields Are Empty Please Enter All the Data Given In the Form For Proper Product Approval").slideDown("slow");
   proceed = false;
   return false;
}

代码没有继续进行，因为我已经设置了我的JQuery代码的变量。任何人都可以帮我解决这个错误吗？提前谢谢。

Answer 1

此脚本非常适合我

$(document).ready(function()
{
    $("#prod_response").hide();
    $("#upload").click(function()
        {
            var proceed = true;
            $("#prod_add_form input[required=true], #prod_add_form select[required=true], #prod_add_form textarea[required=true]").each(function()
                {
                    if(!$.trim($(this).val()))
                        {
                            proceed = false;
                            $(this).addClass('error');
                            $("#prod_response").html("Some Fields Are Empty Please Enter All the Data Given In the Form For Proper Product Approval").slideDown("slow");
                        }
                });

            if(proceed)
                {
                    alert("done");
                        //  var form = new FormData($('#prod_add_form')[0]);
                     //        $.ajax({
                                    //  url: "upload",
                                    //  type: "POST",
                                    //  data: form,
                                    //  cache: false,
                           //              contentType: false,
                           //              processData: false,
                                    //  success:function(data)
                                    //      {
                                    //          alert(data);
                                    //      },
                                    //  error:function(data){
                                    //      alert(data);
                                    //  }
                                    // });
                }
        });

    $("body").on("click", "#prod_add_form input[type=text], #prod_add_form input[type=number], #prod_add_form input[type=file], #prod_add_form select, #prod_add_form textarea",function()
        {
            if($("#prod_response").hasClass("text-danger"))
                {
                    $(this).removeClass("text-danger");
                    setTimeout(function()
                    {
                        $('#prod_response').slideUp('slow');
                    }, 50);
                }
        });

    $("body").on("click", "#prod_add_form input[type=text], #prod_add_form input[type=number], #prod_add_form input[type=file], #prod_add_form select, #prod_add_form textarea",function()
        {
            if($("#prod_add_form input[type=text], #prod_add_form input[type=number], #prod_add_form input[type=file], #prod_add_form select, #prod_add_form textarea").hasClass('error'))
                {
                    $("#prod_add_form input[type=text]").removeClass('error');
                    $("#prod_add_form input[type=number]").removeClass('error');
                    $("#prod_add_form input[type=file]").removeClass('error');
                    $("#prod_add_form select").removeClass('error');
                    $("#prod_add_form textarea").removeClass('error');
                }
        });

});

$(document).on("submit", false);

JQuery代码显示错误消息而不是填充所有字段

1 个答案: