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

我有一些模式中的输入字段，其中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

来源

2013-01-10 crzrcn

在我看来，你shouln't关闭 “提交” 模式，只有 “取消”。我通常会评估提交响应，以了解我是否必须关闭模式（成功）或显示表单错误（验证错误）。需要的属性是HTML5，没有使用JS处理，因此无法打开模式来突出显示无效字段.... – AlterPHP

正如PéCé说，人们不应该关闭上提交的模式。

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

如果我找到更好的方法来处理这个用户体验明智的我会更新答案。

来源

2013-01-12 23:57:11 crzrcn

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-26 00:22:31

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

回答

相关问题