Question

I am trying to get this code to work I found here Infotuts.com

When I process the form the realtime validating is not happening. Here is spot in server where I am testing. My testing page

I have submitted a question to the coder but have failed to get a reply. Maybe someone can help. I believe maybe the way I called my libraries may be wrong or the order in which I called them.

I am just trying to get the validating working before I start tweaking it for my application.

Any solutions or similar scripts I can use? I want to use the alert-success bootstrap 3 has while validating. At this point when I click submit the data goes into the browser but the script that creates the post action is failing.

Here is the code from my head section.

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
        <link rel="stylesheet" href="includes/css/bootstrap-select.css" type="text/css"/>
        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script type="text/javascript" src="includes/js/modernizr-2.6.2.min.js"></script>
        <script type="text/javascript" src="includes/js/jquery.json-2.4.min.js"></script>
        <script type="text/javascript" src="includes/js/jquery-validate.min.js"></script>
        <script type="text/javascript" src="includes/js/bootstrap-select.js" ></script>
        <script type="text/javascript">
$(document).ready(function () {
    $.validator.setDefaults({
        submitHandler: function (form) {
            $.ajax({
                type: "POST",
                url: "email.php",
                data: {
                    'val': $(".myfirstform").serializeJSON()
                }
            }).done(function (data) {
                alert(data);

            });
        }

    });
    $(".myfirstform").validate({
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                },
                website: {
                    required: false,
                    url: true
                },
                cate: "required",
                msg: {
                    required: true,
                    maxlength: 300
                }
            },
            errorClass: "error",
            highlight: function (label) {
                $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
            },

            success: function (label) {
                label
                    .text('Seems Perfect!').addClass('valid')
                    .closest('.form-group').addClass('has-success');

            }
        }

    );

});
</script>
<script type="text/javascript">
        $(window).on('load', function () {

            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });

            // $('.selectpicker').selectpicker('hide');
        });

</script>

Here is my form code:

    <form class="myfirstform" role="form">

<div class="form-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="name" placeholder="Name">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Email</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Website</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input type="text" class="form-control" id="lname" name="website" placeholder="website url">
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Category</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="cate" class="form-control selectpicker  show-tick"> 
<option> Website Design and Development</option>
<option> Social Media Campaign Management</option>
<option> Keyword Analysis</option>
</select>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label">Message</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="msg" class="form-control " rows="4" cols="78" placeholder="Enter your message here"></textarea>
</div>
</div>
</div>
<div class="controls" style="margin-left: 40%;">
<button type="submit" id="mybtn" class="btn btn-primary">Send Message</button>
</div>
</div>
</form>

Here is my php script which emails the form:

    <?php
 $val= $_POST['val'];
 $toemail='myemail@email.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>'; // change this to your email id
 $name = $val['name'];
 $email = $val['email'];
 $website = $val['website'];
 $category = $val['cate'];
 $msg = $val['msg'];

$subject = 'Message from infotuts.com contact form';

$headers = "From: myemail@email.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script> \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

&nbsp;

$message = "<b>Name :</b>".$name."<br>";
$message .='<b>Email :</b>'.$email."<br>";
$message .='<b>Website :</b>'.$website."<br>";
$message .='<b>Category :</b>'.$category."<br>";
$message .='<b>Message :</b>'.$msg;
mail($toemail, $subject, $message, $headers);

echo "Thanks for contacting us!";

?>

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top