How to perform validations for a form under a modal?

Question

How to perform validations for a form under a modal?

jaikumar002 Mar '17

Created Mar '17	Last Reply Mar '17	Replies 1	Views 461	Votes 0

jaikumar002 65.0k

Mar '17

i want to do some validations for form which is in modal.....this is my modal............. i want to do some validations for loading_limit and spending_limit.....if validation fails i want to show them under the form....one way is doing it through js...but in js i have hit db on every key change............so i want to perform validations after submission and redirect it to themodal if it fails...how to do this?

                                            <div class="modal fade" id="{{ loop.index }}" role="dialog">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="modal-dialog">
                                <div class="modal-content">       
                                    <div class="modal-body">
                                        <div class="panel-heading">
                                            Update Wallet Details
                                        </div>
                                        <div>
                                            {{ form("employee/editwalletlimits",'method': 'post') }}  
                                            {{ hidden_field("id", "value":wallet['emp_wallet_rel_id']) }}

                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                                <div class="form-group">
                                                    <label>Wallet Name:</label>                                   
                                                    <div class="input-group">
                                                        <span class="input-group-addon">
                                                            <i class="fa fa-credit-card"></i>
                                                        </span>
                                                        {{ text_field("wallettype_name", "class":"form-control nameOnly validProfileField", "readonly": "true", "required": "true", "value":wallet['name']) }}
                                                    </div>                    
                                                </div>
                                            </div> 
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">    
                                                <div class="form-group">
                                                    <label>Loading Limit:</label>                                   
                                                    <div class="input-group">
                                                        <span class="input-group-addon">
                                                            <i class="fa fa-rupee"></i>
                                                        </span>
                                                        {{ numeric_field("loading_limit", "class":"form-control nameOnly validProfileField", "required": "true", "value":wallet['loading_limit']) }}
                                                    </div>                                      
                                                </div>
                                            </div>   
                                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">                    
                                                <div class="form-group">
                                                    <label>Spending Limit:</label>                                   
                                                    <div class="input-group">
                                                        <span class="input-group-addon">
                                                            <i class="fa fa-rupee"></i>
                                                        </span>
                                                        {{ numeric_field("spending_limit", "class":"form-control nameOnly validProfileField", "required": "true", "value":wallet['spending_limit']) }}
                                                    </div>                                      
                                                </div>
                                            </div>    
                                            <input type="hidden" name="{{ tokenKey }}" value="{{ token }}" />
                                            <ul class="pager">
                                                <li class="previous pull-left">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                </li>
                                                <li class="pull-right">
                                                    {{ submit_button("Save", "class": "btn btn-primary") }}  
                                                </li>
                                            </ul>
                                            {{ end_form() }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>   
                    </div>

Nikolay Mihaylov · Answer 1 · 2017-03-06T00:57:07-07:00

If you do not want to use AJAX, just send the form with normal HTTP POST. After that check if post or errors are set, maually show the modal.

Something like:

{% if errors is defined %}
<script>
    $('#myModal').modal('show');
</script>
{% endif %}

Noticed that you are using boostrap, here is a guide.