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

你可以试试这个：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 回答
0

你为什么不使用更稳定的 jQuery 验证插件来实现你想要做的事情呢？例如：http: //jquery.bassistance.de/validate/demo/

于 2013-01-07T18:20:32.783 回答
0

我建议使用 Jquery Validator 插件：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 回答