Question

我想只在表单完全验证且没有错误时才打开模式对话框。起初我已经禁用了我的按钮，因此它应该首先进行验证，并且只有在验证表单时才应启用它。我正在使用jquery验证，但没有得到我想要的结果。我想当用户点击提交按钮时，如果字段未填充，则不应打开模态。这是我的HTML代码

                      <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-white" type="reset">Cancel</button>
                                     <!-- Trigger the modal with a button -->
                                    <button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  disabled />Confirm</button> 
                                </div>
                      </div>

和我jquery这个

(function() {
$('#PasswordForm > input').keyup(function() {

    var empty = false;
    $('#PasswordForm > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#myBtn').attr('disabled', 'disabled'); 
    } else {
        $('#myBtn').removeAttr('disabled'); 
    }
});})()

我使用的表单验证是

＆＃13;

$(document).ready(function() 
{
    $('#PasswordForm').formValidation({
        message: 'This value is not valid',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: 
		{
            NPassword: 
			{
                validators: 
				{
                    notEmpty: 
					{
                        message: 'The password is required and can\'t be empty'
                    }
                }
            },
            RPassword: 
			{
                validators: 
				{
                    notEmpty: 
					{
                        message: 'The confirm password is required and can\'t be empty'
                    },
                    identical: 
					{
                        field: 'NPassword',
                        message: 'The password and its confirm are not the same'
                    }
                }
            }
        }
    });
});

＆＃13;

<form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange">
							    <div class="hr-line-dashed"></div>
                                <div class="form-group">
								<label class="col-sm-2 control-label">Employee Name</label>
                                    <div class="col-sm-10">
										<input type="text" disabled="" value="@@UserName@@" class="form-control">
									</div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
									<label class="col-sm-2 control-label">New Password</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-6">
												<input type="password"  name="NPassword" placeholder="New Password" class="form-control">
											</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">Retype Password</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-6">
												<input type="password" name="RPassword" placeholder="Retype Password" class="form-control">
											</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button class="btn btn-white" type="reset">Cancel</button>
										 <!-- Trigger the modal with a button -->
										<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  disabled />Confirm</button> 
                                    </div>
                                </div>
                            </form>

＆＃13;

任何建议或帮助将不胜感激。

Answer 1

尝试将按钮更改为：

<button type="button" id="myBtn" class="btn ban-primary">Confirm</button>

并添加以下功能：

$('#myBtn').on('click', function(){
  if(!empty) {
   $('#myModal').modal('toggle');
  }
});

您必须将空变量设为空。（未经测试的代码）

仅在验证表单时打开模式

1 个答案: