William William - 1 year ago 170
Javascript Question

Validation with Parsley and Modal window

I have a problem and can not solve. I have a button that when you click on it displays a message to the user confirmation, it happens that before opening this modal I would like to validate that all fields are filled.

For validation I am using the lib Parsley

If I only use simple button as below the validation is successful.

<button class="btn btn-primary" type="submit">Submit</button>

But if you use the button that calls the modal can not use the validator before.

<button data-toggle="modal" data-target="#md-default" type="button" id="postar" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button>

<!-- Modal -->
<div class="modal fade" id="md-default" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal-body">
<div class="text-center">
<div class="i-circle primary"><i class="fa fa-check"></i></div>
<div class="confirmacao" id="confirmacao">
<h4>Confirma o envio do Push?</h4>
<div class="resp"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id="cancelButton" >Cancelar</button>
<button type="submit" class="btn btn-primary btn-flat enviar" id="submitButton" >Sim</button>
<button type="button" style="display: none" class="btn btn-default btn-flat" data-dismiss="modal" id = "closeButton">Fechar</button>
<!-- /.modal-content -->
<!-- /.modal-dialog -->

<!-- /.modal -->

Answer Source

You can open modal manually like below:

.on('form:submit', function() {
    return false;

Codepen link

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download