1

我在模式中有一些required=true作为属性的输入字段。元素在 a 内<form>，但是当按下提交按钮时，当字段留空时，不会显示所需的警告。我使用 Jade 作为模板引擎和 Bootstrap。

编辑：如果我从提交按钮中删除关闭模式的属性，则所需的属性有效。

所以问题是我怎样才能延迟模式解雇，直到填写必填字段？

这是模态框上的 Jade：

div#passwordModal.modal.hide.fade
        div.modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') x
            h3 Password Reset
        div.modal-body
            form.form-horizontal.form-align-center(action='/changePass', method='post', enctype='multipart/form-data')
                div.control-group
                    label.control-label(for='currentpass') Current Password
                    div.controls
                        input#currentpass(type='password', name='passOld', placeholder='enter old password', required=true)
                div.control-group
                    label.control-label(for='newpass') New Password
                    div.controls
                        input#newpass(type='password', name='passNew', placeholder='enter new password', required=true)
                div.control-group
                    label.control-label(for='newpassconfirm') Confirm
                    div.controls
                        input#newpassconfirm(type='password', name='passNew', placeholder='confirm new password', required=true)
                div.control-group
                    button.btn.btn-success.offset3(type='submit', data-dismiss='modal', aria-hidden='true') Change Password
4

2 回答 2

0

正如PéCé所说，不应该在提交时关闭模式。

我用了两个按钮。一个用于验证输入，使用表单中的数据构造一个 JSON 对象，并执行 $.post 到服务器。在该请求的回调中，我决定是否关闭模式，并显示警报。另一个按钮仅用于关闭模式。

如果我找到更好的方法来明智地处理这个 UX，我会更新答案。

于 2013-01-12T23:57:11.387 回答
0 

function goRegEvent() {

  var connect,form,titulo,detalle,tipo,fechaPublicacion,fechaVencimiento,fechaEvento,horaEvento,lugar,horaInicio,horaFin;


titulo=return document.getElementById('titulo').value;


 if(titulo != '') {
      form ='titulo='+titulo;
     connect = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
 connect.open('POST','ajax.php?mode=regEvent',true);
      connect.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    connect.send(form);

 }else {
      result = '<div class="alert alert-dismissible alert-danger">';
      result += '<button type="button" class="close" data-dismiss="alert">x</button>';
      result += '<h4>ERROR</h4>';
      result += '<p><strong>Los campos con * son obligatorios</strong></p>';
      result += '</div>';
      __('_AJAX_REG_EVENTO_').innerHTML = result;
    }
}

function runScriptReg(e) {
  if(e.keyCode == 13) {
    goRegEvent();
  }
}
<div class="modal fade" id="RegistroEvento" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
           
            <div id="_AJAX_REG_EVENTO_"></div>
  
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 style="color:red;"> Registrar Evento</h4>
            </div>
            <div class="modal-body">
               
                <div role="form" onkeypress="return runScriptReg(event)">

                    <div class="form-group">
                        <label for="titulo"><span class="glyphicon glyphicon-user">  </span> Titulo*</label>
                        <input type="text" class="form-control" id="titulo" placeholder="Introduce un Titulo para el evento" ">
                    </div>

     
                    <button type="button" onclick="goRegEvent()" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-ok-sign"></span> Registrar</button>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
            </div>
      
        </div>
    </div>
</div>

<script src="views/app/js/regEvento.js"></script>

于 2016-07-26T00:22:31.987 回答