Question

I have some input fields in a modal that have required=true as an attribute. The elements are inside a <form>, but when the submit button is pressed the required warning does not show when fields are left blank. I am using Jade as the templating engine and Bootstrap.

Edit: If I remove the attributes that dismiss the modal from the submit button then the required attribute works.

So the question is how can I delay the modal dismissal until the required fields are filled in?

Here is the Jade thats on the modal:

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

As PéCé said, one should not close the modal on submit.

I used two buttons. One for validating input, constructing a JSON object with the data in the form, and performing a $.post to the server. On that request’s callback I decided wether to close the modal or not, and to display alerts. The other button was solely for closing the modal.

If I find a better way to deal with this UX wise I will update answer.