Wednesday, April 13, 2016

BootStrap, JQuery, and JavaScript Validation Oh My... Nice Solution.

You need jQuery library and bootstrap to perform the following code.


Nice Page Header ON TOP

<div id="message">
    <div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" 
aria-hidden="true">×</button>
             <span id="alertMsgTxt" style="font-size:1.5em;font-weight:bold" ></span>
        </div>     
    </div>
</div>


Next is the server control or button either one.

<asp:TextBox ID="txtEmailSignup" TextMode="email"  
runat="server" CssClass="form-control"  title="Email Sign Up SHOE SHOW Sales and News" placeholder="Enter your email address" />

Finally the nice jQuery

<script>
        $(document).ready(function () {
            $(document).on('click', '#lnkEmailSubmit', function () {
                var emailaddress = '';
                emailaddress = $('#txtEmailSignup').val();
                if(!validateEmail(emailaddress) || emailaddress === ''){
                    $('.alert').show();
                    window.scrollTo(0, 0);
                    $('#alertMsgTxt').html('Invalid Email, please 

click here
 to try again.');  
                }
            })
        });
 
        function setFocus() {
            $('.alert').hide();
            document.getElementById("txtEmailSignup").focus();            
        }
 
        function validateEmail($email) {
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            return emailReg.test( $email );
        }
    </script>

No comments: