Successful Validation with Notification

Home Forums Porto Admin – Responsive HTML5 Template Successful Validation with Notification

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10028655
    dsteel
    Participant

    How do I construct my code to validate a form and then show a success notification on successful validation after pressing Submit?

    Do you have an example?

    Thanks

    David


    #10028658
    Support2
    Keymaster

    Hello David,

    To do that please follow the steps below:

    1) Using as base the “Basic Form Validation” on the page “forms-validation.html”, add a hidden input like the code below (inside the form):

    .
    ..
    ...
    <form id="form" action="forms-validation.html" class="form-horizontal">
    	<input type="hidden" name="submit_success" value="1" />
    ...
    ..
    .

    2) Add the “PNotify” CSS stylesheet:

    <!-- Specific Page Vendor CSS -->
    <link rel="stylesheet" href="vendor/select2/css/select2.css" />
    <link rel="stylesheet" href="vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/pnotify/pnotify.custom.css" />

    Add the “PNotify” JS script:

    <!-- Specific Page Vendor -->
    <script src="vendor/jquery-validation/jquery.validate.js"></script>
    <script src="vendor/select2/js/select2.js"></script>
    <script src="vendor/pnotify/pnotify.custom.js"></script>

    3) Add in (js/custom.js):

    var url = new URL(window.location.href);
    var success = url.searchParams.get("submit_success");
    
    if( success ) {
    	new PNotify({
    		title: 'Success!',
    		text: 'Your message has been sent with success!',
    		type: 'success'
    	});
    }

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)

This topic is marked as "RESOLVED" and can not rceive new replies.