Επικύρωση φόρμας τριών σταδίων με jquery

eleionos · 15 Μαρτίου 2017

Καλησπερα στην κοινοτητα. Θελω μια βοηθεια για το λεγομενο form validation. H φορμα αποτελειται απο 3 σταδια. Καθε φορα που ο χρηστης επιλεγει continue o controller πρεπει να τσεκαρει κυριως αν υπαρχουν τιμες στα πεδια και αν δεν υπαρχουν να εμφανιζει τα error messages και να μην προχωραει στο επομενο βημα.Για τα βηματα της φορμας ειναι υπευθυνο ενα script που φορτωνω στο header το οποιο ειναι το παρακατω.

+function($) {
    'use strict';

    var modals = $('.modal.multi-step');

    modals.each(function(idx, modal) {
        var $modal = $(modal);
        var $buttons = $modal.find('button.step');
        var total_num_steps = $buttons.length;
        var $progress = $modal.find('.m-progress');
        var $progress_bar = $modal.find('.m-progress-bar');
        var $progress_stats = $modal.find('.m-progress-stats');
        var $progress_current = $modal.find('.m-progress-current');
        var $progress_total = $modal.find('.m-progress-total');
        var $progress_complete  = $modal.find('.m-progress-complete');
        var reset_on_close = $modal.attr('reset-on-close') === 'true';

        function reset() {
            $modal.find('.step').hide();
            $modal.find('[data-step]').hide();
        }

        function completeSteps() {
            $progress_stats.hide();
            $progress_complete.show();
            $modal.find('.progress-text').animate({
                top: '-2em'
            });
            $modal.find('.complete-indicator').animate({
                top: '-2em'
            });
            $progress_bar.addClass('completed');
        }

        function getPercentComplete(current_step, total_steps) {
            return Math.min(current_step / total_steps * 100, 100) + '%';
        }

        function updateProgress(current, total) {
            $progress_bar.animate({
                width: getPercentComplete(current, total)
            });
            if (current - 1 >= total_num_steps) {
                completeSteps();
            } else {
                $progress_current.text(current);
            }

            $progress.find('[data-progress]').each(function() {
                var dp = $(this);
                if (dp.data().progress <= current - 1) {
                    dp.addClass('completed');
                } else {
                    dp.removeClass('completed');
                }
            });
        }

        function goToStep(step) {
            reset();
            var step_val = step;
            var to_show = $modal.find('.step-' + step);
            if (to_show.length === 0) {
                // at the last step, nothing else to show
                return;
            }
    
            to_show.show(); 
            var current = parseInt(step, 10);
            updateProgress(current, total_num_steps);
            findFirstFocusableInput(to_show).focus();
   }

        function findFirstFocusableInput(parent) {
            var candidates = [parent.find('input'), parent.find('select'),
                              parent.find('textarea'),parent.find('button')],
                winner = parent;
            
            $.each(candidates, function() {
                if (this.length > 0) {
                    winner = this[0];
                    return false;
                }
            });
            return $(winner);
        }

        function bindEventsToModal($modal) {
            var data_steps = [];
            $('[data-step]').each(function() {
                var step = $(this).data().step;
                if (step && $.inArray(step, data_steps) === -1) {
                    data_steps.push(step);
                }
            });

            $.each(data_steps, function(i, v) {
                $modal.on('next.m.' + v, {step: v}, function(e) {
                    goToStep(e.data.step);
                });
            });
        }

     

        function initialize() {
            reset();
            updateProgress(1, total_num_steps);
            $modal.find('.step-1').show();
            $progress_complete.hide();
            $progress_total.text(total_num_steps);
            bindEventsToModal($modal, total_num_steps);
            $modal.data({
                total_num_steps: $buttons.length,
            });
            if (reset_on_close){
                //Bootstrap 2.3.2
                $modal.on('hidden', function () {
                    reset();
                    $modal.find('.step-1').show();
                })
                //Bootstrap 3
                $modal.on('hidden.bs.modal', function () {
                    reset();
                    $modal.find('.step-1').show();
                })
            }
        }

        initialize();
    })
}(jQuery);

Το validation πρεπει να γινει στο function goToStep(step), που βρισκεται περιπου στην μεση του κωδικα ,για να τσεκαρει καθε βημα ξεχωριστα. Πως θα εφαρμοσω το validation σε αυτο το function ;;;

Ενα παραδειγμα το οποιο η θα κανει highlighted τα πεδια η να βγαζει καποιο μηνυμα κατω απο τα πεδια η οπουδηποτε αλλου (π.χ στο πανω μερος της φορμας ..

ο κωδικας της φορμας βρισκεται παρακατω

<form class="modal multi-step" id="demo-modal-3">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title step-1" data-step="1">some text<br/><br/>Personal Info</h3>
                <h3 class="modal-title step-2" data-step="2">some text 1<br/><br/>Departure info <div style="float:right">Price:</div></h3>
                <h3 class="modal-title step-3" data-step="3">some text 2<br/><br/>Generate info & request this tour</h3>
                <div class="m-progress">
                    <div class="m-progress-complete">
                        Completed
                    </div>
                </div>
            </div>
            <div class="modal-body step-1" data-step="1">
               <div class="form-group">
  			<label for="name">Name:</label>
  			<input type="text" class="form-control" id="name" name="name" required="required">
	    </div>
	      <div class="form-group">
  			<label for="surname">Surname:</label>
  			<input type="text" class="form-control" id="surname" required="required">
	    </div>
	      <div class="form-group">
  			<label for="email">Email:</label>
  			<input type="text" class="form-control" id="email" required="required">
	    </div>
	      <div class="form-group">
  			<label for="mobile">Mobile:</label>
  			<input type="text" class="form-control" id="mobile" required="required">
	    </div>
            </div>
            <div class="modal-body step-2" data-step="2">
                
                <div class="form-group">
  		<label for="party-size">Party size:</label>
  			<select class="form-control" id="party-size">
    			<option>1-4 people</option>
    			<option>5-10 people</option>
    			<option>11-16 people</option>
			</select>
	     </div>
                
                <div class="form-group">
  		<label for="adults">Adults:</label>
  		 <input type="text" class="form-control" id="adults" required="true" placeholder="0">
  	        </div>
	   	
	   	<div class="form-group">
  		<label for="children">Children:</label>
  		 <input type="text" class="form-control" id="children" required="true" placeholder="0">
  	        </div>
  	           
	      <div class="form-group">
  		<label for="datetimepickup">Departure date:</label>
  		<input type="text" class="form-control" id="datetimepickup" required="true" placeholder="mm/dd/yyyy">
             </div>
	    
	   <script>
		   jQuery(function($){
  			 $("#datetimepickup").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
  		   });
	   </script>
	   
	      <div class="form-group">
  		<label for="pickuptime">Departure time:</label>
  			<select class="form-control" id="pickuptime">
    			<option>10 PM</option>
    			<option>2 AM</option>
			</select>
	     </div>
	   	        
  	    
	    </div><!--End of modal 2 -->

           <div class="modal-body step-3" data-step="3">
                Generate info & submit data
           </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-primary step step-3" data-step="2" onclick="sendEvent('#demo-modal-3', 2)">Back</button>
                <button type="button" class="btn btn-danger step step-1" data-step="1" onclick="sendEvent('#demo-modal-3', 2)">Continue</button>
                <button type="button" class="btn btn-primary step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 1)">Back</button>
                <button type="button" class="btn btn-danger step step-2" data-step="2" onclick="sendEvent('#demo-modal-3', 3)">Continue</button>
                <button type="submit" class="btn btn-primary step step-3" data-step="3" onclick="sendEvent('#demo-modal-3', 3)">Send request</button>
            </div>
        </div>
    </div>
</form>

Ευχαριστω εκ' των προτερων

Επεξ/σία 16 Μαρτίου 2017 από eleionos

XPHSTOS_ · 16 Μαρτίου 2017

Ένα Codepen ή JSFiddle θα βοηθούσε περισσότερο...

Σύνδεση

Επικύρωση φόρμας τριών σταδίων με jquery

Προτεινόμενες αναρτήσεις

eleionos

XPHSTOS_

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση