0

Web アプリケーションで、テキスト ボックスの値をデータベースに挿入したいのですが、最初に、すべてのフィールドが入力されていることを確認します。

現在、私のコードは多数のif {}条件に依存しており、より洗練されたものにしたいと考えています。これが私がこれまでに持っているものです：

$(function () {
    $('#BtnInquiryPageSave').click(function () {
        if ($("#TbFirstName").val().toLowerCase() == "") {
            $('#TbFirstName').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }

        if ($("#TbRequestedCharterDate").val().toLowerCase() == "") {
            $('#TbRequestedCharterDate').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#TbEndDate").val().toLowerCase() == "") {
            $('#TbEndDate').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlPersons").val().toLowerCase() == "-1") {
            $('#ddlPersons').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlCabin").val().toLowerCase() == "-1") {
            $('#ddlCabin').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ddlBoatSize").val().toLowerCase() == "-1") {
            $('#ddlBoatSize').addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ContentPlaceHolder2_ContentPlaceHolder4_ddlBoatType").val().toLowerCase() == "-1") {
            $('#ContentPlaceHolder2_ContentPlaceHolder4_ddlBoatType')
                .addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#ContentPlaceHolder2_ContentPlaceHolder4_ddlSource").val().toLowerCase() == "-1") {
            $('#ContentPlaceHolder2_ContentPlaceHolder4_ddlSource')
                .addClass('RequiredFieldDdl');
            $('#ErrorLable').css('visibility', 'visible');
        }
        if ($("#TbOther").val().toLowerCase() == "") {
            $('#TbOther').addClass('RequiredField');
            $('#ErrorLable').css('visibility', 'visible');
        }
    });
});

これらの条件をすべてテストする簡単な方法が本当に欲しいです。理想的には、単一のif/elseまたは同様に簡単なものです。クリックして検証できるようにする必要がありますsubmit...失敗した場合は失敗メッセージを表示し、成功した場合はデータをデータベースに送信します。

より良いアプローチは何でしょうか?

4

3 に答える 3

0

あなたがやろうとしていることを達成するために、より安定したjQuery検証プラグインを使用しないのはなぜですか? 例: http://jquery.bassistance.de/validate/demo/

于 2013-01-07T18:20:32.783 に答える
0

Jquery Validator Plugin を使用することをお勧めします: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

これは簡単で、$('#formToValidate').validate(); で初期化します。

フォームのフィールドに、次のようなクラスを追加します。

<form action="" id="formToValidate">
<input type="text" name="name" id="name" class="required" />
</form>

詳細: http://docs.jquery.com/Plugins/Validation

于 2013-01-07T18:24:48.353 に答える
0

これを試すことができます：http://jsfiddle.net/B8yQs/

$('form').submit(function (e) {

   $(':text').each(function () {
       if ($(this).val() == '') {
        $(this).css({
            'border': 'solid 1px red',
             'color': 'red'
        }).val('required.');
       e.preventDefault(); // stops the form from submit
      }
    $(this).focus(function () {
        $(this).css({
            'border': 'solid 1px black',
             'color': 'grey'
           }).val('');
        });
      });
});

また、状況でこれを試すこともできますが、ほとんど修正されません:

$('form').submit(function (e) {

   $(':text').each(function () {
       if ($(this).val() == '') {
        $(this).addClass('RequiredField');
        $(this).next('.ErrorLable').css('visibility', 'visible');
        //------------^^^^^^^^^^^------------------------use class instead of ids
       e.preventDefault(); // stops the form from submit
      }
    $(this).focus(function () {
        $(this).removeClass('RequiredField');
        $(this).next('.ErrorLable').css('visibility', 'hidden');
        });
      });
});
于 2013-01-07T18:36:18.533 に答える