字段验证 - 服务器和客户端答案

【问题标题】：field validation - both server and client side字段验证 - 服务器和客户端
【发布时间】：2012-05-13 07:40:52
【问题描述】：

我有一个特定字段需要服务器端和客户端验证的表单。我正在使用 jquery 验证插件来执行客户端验证。下面是相同的代码。

$('#createapp').validate({
    rules: {
      appname: {
        minlength: 8,
        required: true
      },
      apptitle: {
        required: true
      }
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label
            .text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    }
  });

现在我需要检查用户尝试输入的 appname 是否已存在于 DB 中。我正在使用 ajax 使用此代码执行检查

$('#appname').focusout(function(){
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>index.php/app/application/check_app",
        data: "appname="+$("#appname").val(),
        success: function(msg){

            if(msg == "false")
            {
               var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('error');
                   controlDiv.removeClass('success');
            }
            else
            {
                var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('success');
                   controlDiv.removeClass('error');
            }
        }
    });
});

虽然这会使字段控件变为红色，但不会停止表单提交。我不想复制服务器端的逻辑来检查并返回错误。

如果应用名称已被占用，我可以在哪里添加代码以禁用表单提交？？

请帮忙

【问题讨论】：

标签： validation jquery jquery-validate

【解决方案1】：

尝试使用$('#createapp').validate( ...code...).cancelSubmit = true;

【讨论】：

【解决方案2】：

我可能遗漏了一些东西，但我认为您采取了错误的方法。 jQuery Validate 支持远程验证，但你没有使用它。

请查看remote规则。

【讨论】：

【解决方案3】：

我猜#createapp 是你的表单？如果是这样，如果名称已被占用，我会更改提交属性。

$('#appname').focusout(function(){
    $.ajax({
        type: "POST",
        url: "<?php echo base_url();?>index.php/app/application/check_app",
        data: "appname="+$("#appname").val(),
        success: function(msg){

            if(msg == "false")
            {
               var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('error');
                   controlDiv.removeClass('success');
               $('#createapp').attr('submit', 'return false;');
            }
            else
            {
                var controlDiv = $('#appname').closest('.control-group');
                   controlDiv.addClass('success');
                   controlDiv.removeClass('error');
            }
        }
    });
});

【讨论】：