Question

我正在开发一个表单，它通过使用“jquery验证插件”和服务器端使用php验证客户端。这是我的标记

HTML

<div id="recipe-form">
                <div class="row">
                <div class="col col-lg-9">
                <form id="recipe-submit-form" class="form-horizontal" name="newad" method="post" enctype="multipart/form-data"  action="<?php the_permalink(); ?>">   


                <div class="row control-group onoffclass">
                <label for="recipetitle" class="col col-lg-2 control-label">Recipe Title:<sup>&#42;</sup></label>
                <div class="col col-lg-7 controls">
                <input id="recipetitle" class="input-with-feedback" name="recipetitle" data-content="Required: Minimum 10 characters long" data-placement="top" data-toggle="popover" title="Recipe Title" placeholder="Recipe Title" type="text" />
                <?php if($titleError != '') { ?><span class="nojserror"><?php echo $titleError;?></span><?php } ?>
                </div>
                </div> <!-- recipe title -->


                <div class="row control-group onoffclass">
                <label for="recipedesc" class="col col-lg-2 control-label">Recipe Desc:<sup>&#42;</sup></label>
                <div class="col col-lg-7 controls">
                <textarea id="recipedesc" class="input-with-feedback" name="recipedesc" data-content="Required: A Brief recipe description" data-placement="top" data-toggle="popover" title="Recipe Description" placeholder="Recipe Short Description"></textarea>
                <?php if($descError != '') { ?><span class="nojserror"><?php echo $descError;?></span><?php } ?>

                </div>
                </div> <!-- recipe desc -->
                <div class="row">
                <div id="submitform" class="col col-lg-10 col-offset-2">
                <button name="Submit" type="submit" id="formsubmit" class="btn btn-default">Submit Recipe</button>
                </div>
                </div>
                <input type="hidden" name="submitted" id="submitted" value="true" />

                </form>
                </div>
                </div>
                </div>

PHP

<?php
                if(isset($_POST['submitted'])) {
                //title
                if(trim($_POST['recipetitle']) === '')  {
                $titleError = 'Please enter title for your recipe.';
                $hasError = true;
                } else if (strlen(trim($_POST['recipetitle']))<= 10) {
                $titleError = 'Recipe Title is too short.';
                $hasError = true;
                } else {
                $recipetitle = trim($_POST['recipetitle']);
                }

                //desc
                if(trim($_POST['recipedesc']) === '')  {
                $descError = 'Please enter description for your recipe.';
                $hasError = true;
                } else if (strlen(trim($_POST['recipedesc']))<= 10) {
                $descError = 'Recipe description is too short.';
                $hasError = true;
                } else {
                $recipedesc = trim($_POST['recipedesc']);
                }

                }
                ?>

的jQuery

             <script>
            $(document).ready(function(){
            var ruleSet1 = {
            required: true,
            minlength: 10
            };
            $('#recipe-submit-form').validate({
            rules: {
            recipetitle: ruleSet1,
            recipedesc: ruleSet1,
            }

            });
            });
            </script>

每件事似乎工作正常，我面临的问题是，当我禁用Javascript时，php会显示验证错误。同时我启用Javascript并重新提交表单。现在jquery还将显示php错误旁边的验证错误。请查看截图以了解该问题。 enter image description here

非常感谢您对此的任何帮助

此致

Answer 1

根据js或php error的具体情况，应用特定的错误类怎么办？

<span class="jsError">Some Error</span>
<span class="phpError">Some Error</span>

在css中，您只需隐藏js错误。

.jsError {
    display:none;
}

在js中，隐藏php errors并在那里进行正常的jQuery验证，只会显示js errors。

$(function() {
    $('.phpError').hide();

    //after doing your jsValidation show js error only
});

这样，如果禁用了js，则只会出现PHP错误。

表单客户端和服务器端验证问题

1 个答案: