1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Create Contact Us Form Validate fields using javascript</title></head><body><style>#main{float:left;display:inline;width:470px;margin-left:55px;}form{ margin:1em 0; }fieldset{ border:none; margin:0; background:#f1f1f1; border:5px solid #e7e7e7; padding:1em 15px; } legend{ display:none; } label{ float:left; clear:both; width:120px; margin-right:10px; margin-top:5px; text-align:right; }input, textarea{ width:250px; border:1px solid #ccc; padding:5px; margin:5px 0; } textarea{ height:80px; overflow:auto; } form p{ clear:both; margin:0; }form h3{ margin:1em 0 .5em 0; font-size:25px; } .submit{ text-align:right; }span.error{ display:block; color:#a50000; font-weight:bold; margin-left:130px; }</style><script>this.form = function(){ this.validate = function(name, email, message){ $("span.error").remove(); var valid = true; //name if(name == "") { error($("#name"),"Please tell us your name.") valid = false; }; //email if(!checkEmail(email)) { error($("#email"),"We need a valid email address.") valid = false; }; //messgae if(message == "") { error($("#message"),"Please write a message.") valid = false; }; return valid; }; this.checkEmail = function(str){ var regEx = /^[^@]+@[^@]+.[a-z]{2,}$/; return (str.search(regEx) != -1); }; this.error = function(obj,text){ var parent = $(obj).parent(); parent.append("<span class=\"error\">"+ text +"</span>"); $("span.error",parent).hide().show("fast"); }; $("#contactForm button").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); if(validate(name, email, message)) return true; return false; });};this.init = function() { form();};$(document).ready(function(){ init();});</script><div id="main"> <h2>Contact us</h2> <p>Nunc volutpat nisi nec leo. Fusce accumsan, mi ac posuere rhoncus, arcu orci tristique leo, vitae consequat.</p> <form id="contactForm" action="send.php" method="post"> <fieldset><legend>Contact form</legend> <p> <label for="name">Name</label> <input type="text" name="name" id="name" size="30" /> </p> <p> <label for="email">Email</label> <input type="text" name="email" id="email" size="30" /> </p> <p> <label for="message">Message</label> <textarea name="message" id="message" rows="10" cols="30"></textarea> </p> <p class="submit"> <button type="submit">Send</button> </p> </fieldset> </form></div> </body></html> |
1 2 | //sent.php<p><h1>Email Succesfully sent</h1></p> |
