0

「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 エラーの横に検証エラーも表示します。問題を理解するには、スクリーンショットを参照してください。 ここに画像の説明を入力

これについて何か助けていただければ幸いです

よろしく

4

1 に答える 1