1

required=true属性として持つモーダルにいくつかの入力フィールドがあります。要素はの中にあり<form>ますが、送信ボタンが押されたときに、フィールドが空白のままになっている場合、必要な警告は表示されません。テンプレートエンジンとブートストラップとして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

ペセが言ったように、提出時にモーダルを閉じるべきではありません。

2つのボタンを使用しました。1つは入力の検証、フォームのデータを使用したJSONオブジェクトの作成、サーバーへの$.postの実行です。そのリクエストのコールバックで、モーダルを閉じるかどうか、アラートを表示するかどうかを決定しました。もう1つのボタンは、モーダルを閉じるためだけのものでした。

この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 に答える