required 属性是否适用于模式中的输入元素？答案

【问题标题】：Does the required attribute work for input elements that are in a modal?required 属性是否适用于模式中的输入元素？
【发布时间】：2013-01-10 04:21:23
【问题描述】：

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

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

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

这是模态框上的翡翠：

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

【问题讨论】：

在我看来，你不应该在“提交”上关闭模式，只在“取消”上关闭。我通常评估提交响应以了解我是否必须关闭模式（成功）或显示表单错误（验证错误）。 required 属性是 HTML5，不是用 JS 处理的，所以它不能打开一个模式来突出一个无效的字段....

标签： html twitter-bootstrap modal-dialog pug

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：