0

jquery検証を使用したフォームがあります。いくつかのカスタム ルールがありますが、それらはすべてチェックアウトされ、他のフォームで正常に機能します。実際、特定の状況を除いて、このフォームでは問題なく機能します。URL のテキスト入力があります。スクリプト タグを禁止する正規表現を作成しました。そして、それはうまくいきます。

フォームにエラーを入力して送信すると、エラー メッセージが表示されます。予想通り。しかし、この URL フィールド... 失敗する前に有効な URL を入力し、それをスクリプト タグに変更して [保存] をクリックすると、エラー メッセージがすぐに表示されますが、それでもフォームは送信されます。最初にタブでフィールドから離れると、エラー メッセージが表示されます。ただし、「保存」をクリックすると、フォームが保存されます。

ページ読み込み機能を使用してフォーム アクションを無効にし、アクションをフォームが有効かどうかのチェックに置き換えようとしました。フォームを空白のままにして [保存] をクリックすると、エラーが発生します。満たしてしまえば何も得られません。保存をクリックしても何も起こりません。

これが私のフォームタグです。フィールドは特に重要ではありません。ここでの問題は、フォームが検証に失敗しているにもかかわらず保存されていることです。

<form id="frmCreateNewAd" action="/some/path" method="post" enctype="multipart/form-data">
  <input class="btnSave" type="submit" value="Save" />
</form>

フォームが検証に合格したときにクリックされるまで、送信アクションを変更してデフォルトのアクションを無効にする試みを次に示します。

//bind custom form action
$('#frmCreateNewAd').bind("submit", function(e){
  //disable default action
  e.preventDefault();
  //remove previous validation data
  $('#frmCreateNewAd').removeData("previousValue");
  //check if form is valid
  if ($('#frmCreateNewAd').valid()) {
    //if form is valid, unbind the submit action and submit the form
    $('#frmCreateNewAd').unbind('submit').submit();
  }
});

おそらく問題はバインド内からバインドを無効にしようとしていると思いました...しかし、まったく同じ結果でこれも試しました

//bind custom form action
$('#frmCreateNewAd').bind("submit", function(e){
  //disable default action
  e.preventDefault();
  //remove previous validation data
  $('#frmCreateNewAd').removeData("previousValue");
  //validate form
  $('#frmCreateNewAd').valid();
});

//When user submits form
$('#frmCreateNewAd').submit(function (e) {
  //remove previous validation data
  $("#frmCreateNewAd").removeData("previousValue");
  //check if form is valid
  if($('#frmCreateNewAd').valid()) {
    //if valid, unbind custom submit and submit the default action
    $(this).unbind('submit').submit();
  }
  else {
    //if invalid, ensure default is still prevented
    e.preventDefault();
  }
});

送信アクションを二重にバインドしているように感じますか? 他の誰かがこの問題を克服しなければなりませんでしたか?

アップデート：

検証コード:

グローバル ファイルから:

if ($.validator) {
    $.validator.messages.required = 'Required field';
    $.validator.addMethod("zipcode", function(postalcode, element) { return this.optional(element) || postalcode.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/); }, 'A valid Zip code is required');
    //$.validator.addMethod("urlcustom", function isUrl(str){ var regex = new RegExp("^((http|https|ftp)\://){0,1}([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*$"); return regex.test(str); }, 'A valid URL is required');
    $.validator.addMethod("alphanumspaces", function alphanumspaces(value, element) { return this.optional(element) || value.match(/^[A-Za-z0-9_\-]+(\s[A-Za-z0-9_\-]+)*$/); }, 'Only letters, numbers, underscores (_), hyphens (-), and single spaces are allowed.');
    $.validator.addMethod("alphanumspchars", function alphanumspchars(value, element) {return this.optional(element) || value.match(/^[A-Za-z0-9_\-,\.\#\/\'\"\?]+(\s[A-Za-z0-9_\-,\.\#\/\'\"\?]+)*$/); }, 'Only letters, numbers, single spaces, and simple punctuation (\'\"-,_.#/?) are allowed.' );
    $.validator.addMethod("alphaspaces", function alphaspaces(value, element) {return this.optional(element) || value.match(/^[A-Za-z]+(\s[A-Za-z]+)*$/); }, 'Only letters and single spaces are allowed.');
    $.validator.addMethod("alphaspspaces", function alphaspspaces(value, element) {return this.optional(element) || value.match(/^[A-Za-z\-\.\(\)]+(\s[A-Za-z0\-\.\(\)]+)*$/); }, 'Only letters, hyphens (-), periods (.), and single spaces allowed');
    $.validator.addMethod("numeric", function numeric(value, element) {return this.optional(element) || value.match(/^[0-9]+$/); }, 'Only numbers with no spaces are allowed.');                $.validator.addMethod("statecode", function statecode(value, element) {return this.optional(element) || value.match(/^(A[LKSZRAEP]|C[AOT]|D[EC]|F[LM]|G[AU]|HI|I[ADLN]|K[SY]|LA|M[ADEHINOPST]|N[CDEHJMVY]|O[HKR]|P[ARW]|RI|S[CD]|T[NX]|UT|V[AIT]|W[AIVY]|alabama|alaska|arizona|arkansas|california|colorado|connecticut|delaware|florida|georgia|hawaii|idaho|illinois|indiana|iowa|kansas|kentucky|louisiana|maine|maryland|massachusetts|michigan|minnesota|mississippi|missouri|montana|nebraska|nevada|new\shampshire|new\sjersey|new\smexico|new\syork|north\scarolina|north\sdakota|ohio|oklahoma|oregon|pennsylvania|rhode\sisland|south\scarolina|south\sdakota|tennessee|texas|utah|vermont|virginia|washington|wyoming|d.c.)$/i); }, 'A valid state or two-letter state abbreviation is required.');
    $.validator.addMethod("isDollars", function isDollars(value, element) {return this.optional(element) || value.match(/[0-9]+(\.[0-9]{2})?$/); }, 'Must be a valid dollar amount, with or without decimal.');
    $.validator.addMethod("keywords", function keywords(value, element) {return this.optional(element) || value.match(/^[A-Za-z0-9]+(,?\s[A-Za-z0-9]+)*$/); }, 'Keywords may only contain letters, numbers, and single spaces. Keywords must be separated by a comma and single space (, )');
    $.validator.addMethod("notzero", function notzero(value, element) {return this.optional(element) || value.match(/(^[1-9]+[0-9]*$)|(^0+[1-9]$)/); }, 'Please enter a value greater than zero');
    $.validator.addMethod("urlOpt", function urlOpt(value, element) {return this.optional(element) || value.match(/^(((http|https|ftp)\:\/\/){0,1}([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&amp;%\$\-]+)*@)*((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(\:[0-9]+)*(\/($|[a-zA-Z0-9\.\,\?\'\\\+&amp;%\$#\=~_\-]+))*)*$/); }, 'Please enter a properly formatted URL');
    $.validator.addMethod("noQuoteWrap", function noQuotes(value, element) {return this.optional(element) || value.match(/^[^\'\"].*[^\'\"]$/); }, 'Please remove leading or trailing quotes');
    $.validator.addMethod("phoneNum", function phoneNum(value, element) {return this.optional(element) || value.match(/^(1-|1\.|1)?(\([0-9]{3}\)|[0-9]{3})[\.\-]?[0-9]{3}[\.\-]?[0-9]{4}$/); }, 'Please enter a valid phone number, with or without hyphens (-), periods (.), or parenthesis ().');
    $.validator.addMethod("spaceStrip", function spaceStrip(value, element) { return this.optional(element) || value.match(/^[.]*$/); }, 'Removing leading and trailing whitespace');
    $.validator.addMethod("noScript", function noScript(value, element) { return this.optional(element) || value.match(/^((?!<script).)*$/); }, 'Script tags are not allowed');

    // Create and hide error message DOM elements
    var errorWrap = document.createElement('div');
    $(errorWrap).addClass('errorWrap hideError');
    var errorTop = document.createElement('div');
    $(errorTop).addClass('errorTop');
    var topSpan = document.createElement('span');
    var errorContent = document.createElement('div');
    $(errorContent).addClass('errorContent');
    var errorBottom = document.createElement('div');
    $(errorBottom).addClass('errorBottom');
    var bottomSpan = document.createElement('span');

    $("dl > dd").append(errorWrap);
    $("div.errorWrap").append(errorTop)
            .append(errorContent)
            .append(errorBottom);
    $("div.errorTop").append(topSpan);
    $("div.errorBottom").append(bottomSpan);

    //Set custom placement, highlighting, and unhighlighting
    $.validator.setDefaults({
                errorPlacement: function(error, element) {
                    if ($(element).attr("name") == "remnantList") {
                        $(element).parent().nextAll('.errorWrap').children('.errorContent').append(error);
                      }
                    else {
                        $(element).nextAll('.errorWrap').children('.errorContent').append(error);
                    }
                },
                highlight: function(element) {
                    if ($(element).attr("name") == "remnantList") {
                        $(element).parent().nextAll('.errorWrap').removeClass('hideError');
                    }
                    else {
                        $(element).nextAll('.errorWrap').removeClass('hideError');
                    }
                },
                unhighlight: function(element) {
                    if ($(element).attr("name") == "remnantList") {
                        $(element).parent().nextAll('.errorWrap').addClass('hideError');
                      }
                    else {
                        $(element).nextAll('.errorWrap').addClass('hideError');
                    }
                },
                onkeyup: false

    });

ページ固有の js ファイルから:

$('form').validate({
            errorElement: 'span',
            onkeyup: true,
            onfocusout: true,
            rules: {
                    'adName': { required: true, spaceStrip: { depends:  function() { $(this).val($.trim($(this).val())); return false; } }, maxlength:200 },
                    'adText': { alphanumspchars: true, maxlength:1000, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'thirdPartyImpressionTrackingUrl': { noQuoteWrap: true, maxlength:1000, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'thirdPartyClickTrackingUrl': { noScript: true, noQuoteWrap: true, maxlength:1000, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.destinationUrlView': { required: { depends: destinationUrlRequired }, noQuoteWrap: { depends: isBannerAndFirstFieldIsUrl }, /*number: { depends: isBannerAndIsClickToCall },*/ minlength: function() { return isBannerAndIsClickToCall() ? 10 : false; }, maxlength:1000, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.destinationFile': { required: { depends: isBannerAndDestinationFile }, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[0].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[1].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[2].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[3].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[4].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[5].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[6].multipartFile': { required: { depends: requiredFileUpload }, accept:'jpg|gif|png', spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.interactions[0].destinationUrl': { required: { depends: isVideoAndVisible }, maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.interactions[1].destinationUrl': { required: { depends: isVideoAndVisible }, maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.interactions[2].destinationUrl': { required: { depends: isVideoAndVisible }, maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.interactions[3].destinationUrl': { required: { depends: isVideoAndVisible }, maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.interactions[4].destinationUrl': { required: { depends: isVideoAndVisible }, maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[0].destinationUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[1].destinationUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[2].destinationUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[3].destinationUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[4].destinationUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[0].thirdpartyImpressionUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[1].thirdpartyImpressionUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[2].thirdpartyImpressionUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[3].thirdpartyImpressionUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[4].thirdpartyImpressionUrl': { maxlength:1000, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[0].thirdpartyClickUrl': { maxlength:1000, noScript: true, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[1].thirdpartyClickUrl': { maxlength:1000, noScript: true, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[2].thirdpartyClickUrl': { maxlength:1000, noScript: true, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[3].thirdpartyClickUrl': { maxlength:1000, noScript: true, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'bannerAdCommand.bannerFiles[4].thirdpartyClickUrl': { maxlength:1000, noScript: true, noQuoteWrap: true, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.videoMultipartFile': { required: { depends: isVideoAndNoneExists }, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } },
                    'videoAdCommand.duration': { required: { depends: isVideo }, spaceStrip: { depends: function() { $(this).val($.trim($(this).val())); return false; } } }
            },
            messages: {
                    'bannerAdCommand.destinationUrlView': { url: 'Valid URL is required' },
                    'bannerAdCommand.bannerFiles[0].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[1].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[2].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[3].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[4].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[5].multipartFile': { required: bannerMissing, accept: bannerType },
                    'bannerAdCommand.bannerFiles[6].multipartFile': { required: bannerMissing, accept: bannerType },
                    'videoAdCommand.videoMultipartFile': { required: videoMissing, accept:'mov|mp4|wmv|avi' }
            }
    });
4

4 に答える 4

0

スクリプトタグを拒否するためにjqueryバリデーターで使用したのと同じ正規表現を使用してサーバーからの値を拒否する中間層バリデーターメソッドを追加することで、これを修正することになりました。これは私がこれを解決することを望んでいた方法ではありませんが、それは機能します。問題は、非常に特殊な状況下でのjqueryバリデーターの送信ハンドラー内のバグのように見えるので、回避して先に進む方がよいと思いました。入力を提供してくれたすべての人に感謝します。

于 2012-04-09T21:06:28.987 に答える
0

検証またはカスタム スクリプトに jQuery プラグインを使用していますか? 私は自分でいくつかのテストを実行したいと思います。

于 2012-04-04T23:02:53.500 に答える
0

フォームが検証されない場合に false を返すのはどうですか?フォームの送信を妨げませんか? .

私が間違っている場合は修正してください: 1) ユーザー入力を検証します 2) すべての入力が正しい場合はフォームを送信します 3) そうでない場合はエラーを表示します

あなたの問題は、検証エラーであってもフォームを送信することです。

于 2012-04-04T22:50:49.643 に答える
0

これは私のために働いた：

    $(document).ready(function () {
        $("#frmCreateNewA").validate();

        //bind custom form action
        $('#frmCreateNewAd').bind("submit", function (e) {
            //disable default action
            e.preventDefault();

            alert($('#frmCreateNewAd').valid());
            //remove previous validation data
            $('#frmCreateNewAd').removeData("previousValue");
            //check if form is valid
            if (!$('#frmCreateNewAd').valid()) {

                return false
            }

        });

    });

   <form id="frmCreateNewAd" action="javascript:alert('success!');">

 <input id="txttest" type="text" class="required checkUrl" />
 <input class="btnSave" type="submit" value="Save" />

 </form>

ここで、「class」属性はルールを指定します: http://docs.jquery.com/Plugins/Validation/rules

docs.jquery.com/Plugins/Validation/valid をご覧ください

于 2012-04-05T00:03:57.403 に答える