所需属性是否适用于模态中的输入元素

Question

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

Edit:如果我从提交按钮中删除了驳回模式的属性，那么所需的属性就可以工作了。

那么问题是，我如何才能延迟模态解除，直到填好所需的字段?

这是在模态上的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

Answer 1

正如psamacess所说，提交时不应该关闭模态。

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

如果我找到一个更好的方法来处理这个UX明智的我将更新答案

Answer 2

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>