Eliminate spam with Date questions and HTML5 validation.

The Code below is with bootstrap styling which you can see and test in the Comments section at the bottom of any Blog post.

I added a accept terms checkbox and the JavaScript code for its required function to hinder bots, and so user accepts the terms and conditions of your sites usage.

Including a Honey Pot hidden input with its script.

HTML5 date inputs just need type="date" for a functioning date input; adding min or max values gives its date constraints as in my first date field, "which I removed from comments", max="2015-11-15".

<input class="required form-control" type="date" name="myDate" 
max="2015-11-15" placeholder="mm/dd/yyyy" required>
the second date fieldsets a value of  Date must be after today! And requires javascript to determine todays date.
<input id="arrivalDate" class="required form-control" type="date" name="myDate" placeholder="mm/dd/yyyy" required>

Either one with the required attribute make it, "Spam bot unfriendly", and Human friendly!

The full code for both bootstrap 3 styling in a row:

<div class="form-group col-md-offset-2">
     <label>Human Checker</label></div>
            <div class="clearfix visible-xs-block">
               <div class="row">                  
		    <div class="form-group col-xs-4 col-md-3 col-md-offset-2">
                         <label>Enter a date before 2015-11-15:</label>
                                <input class="required form-control" type="date" name="myDate" max="2015-11-15" 
                                placeholder="mm/dd/yyyy" required>
                   </div>
                   <div class="form-group col-xs-4 col-md-3 col-md-offset-1">
                         <label>Enter a date after today</label>
                                // Date checker arrivalDate
                                <input id="arrivalDate" class="required form-control" type="date" name="myDate" 
                                placeholder="mm/dd/yyyy" required>
							</div>								
               </div>
               <div class="form-group">
                   <div class="checkbox">
			<label>
                               <input class="required" required type="checkbox" 
                                 onchange="this.setCustomValidity(validity.valueMissing ? 
                                 'Please indicate that you accept the Terms and Conditions' : '');" 
                                  id="terms" name="terms" value="terms" />Please agree to our terms
		        </label>
		</div>
                </div>
                // Hidden Honey Pot field 
                <input id="website" type="hidden" name="hiddenId" value="1234">          
           <div class="clearfix"></div>
            <div class="form-group">
                <button class="btn btn-success btn-post" type="submit">@T("Register")</button>
            </div>
</div>
//The script
<script type="text/javascript" defer="defer">
//<![CDATA[
var arrivalDate = document.getElementById("arrivalDate,nextDate");
    arrivalDate.addEventListener("input", function() {
        var value = new Date(arrivalDate.value);
        if (value < new Date()) {
            arrivalDate.setCustomValidity("Date must be after today!");
        } else {
            arrivalDate.setCustomValidity("");
        }
 
    });
    //Terms check box
    document.getElementById("terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");
    // Honey Pot
    $('form').submit(function() {
        if ($('input#website').val().length !== 0) {
            return false;
        }
    });
//]]>
</script>

 

No Comments

Comments are Moderated, from, "(Spam-bots)", before they are posted.

 1467835 Views