Phiên bản đầy đủ: jsB@nk » Email » Mẫu liên hệ có kiểm tra dữ liệu và chuyển trang
URL: https://www.javascriptbank.com/form-validation.html
Hiệu ứng tạo ra một mẫu liên hệ cho khách truy cập trên site của bạn sử dụng, đồng thời nó cũng sẽ kiểm tra dữ liệu nhập vào có hợp lệ hay không và sẽ chuyển tới trang khác khi đã submit thành công.
Phiên bản đầy đủ: jsB@nk » Email » Mẫu liên hệ có kiểm tra dữ liệu và chuyển trang
URL: https://www.javascriptbank.com/form-validation.html
<SCRIPT language=JavaScript type=text/javascript><!-- Hide script from older browsers// This script checks for numeric input only in form fields.var nr=0; function numericCheck(){ // Eg: nrl=document.<name of form>.<name of field>.value; nr1=document.signup.PHONE.value; flg=0; str=""; spc="" arw=""; for (var i=0;i<nr1.length;i++){ cmp="0123456789" tst=nr1.substring(i,i+1) if (cmp.indexOf(tst)<0){ flg++; str+=" "+tst; spc+=tst; arw+="^"; } else{arw+="_";} } if (flg!=0){ if (spc.indexOf(" ")>-1) { str+=" and/or a space"; } alert(nr1+"\r"+arw+"\rI'm sorry. This entry must " +"be a number. I found "+flg+" unacceptable characters: "+str+"."); return false; } return true; }// End Hiding --></SCRIPT><SCRIPT language=JavaScript type=text/javascript><!-- Hide script from older browsers// This script validates fields, returns error messages, submits form and redirects page// Ensure that ESSENTIAL FIELDS have been filled in.function CheckFields(pform) { // The fields are checked for blanks if ( pform.FIRSTNAME.value == "" || pform.SURNAME.value == "" || pform.EMAIL.value == "" || pform.ADDRESS.value == "" || pform.POSTCODE.value == "" || pform.PHONE.value == "" ) { alert( "Data in essential fields missing.\nPlease ensure that all fields are filled in." ); return false; }// check for valid email addresselse if ( pform.EMAIL.value.length <= 6 || pform.EMAIL.value.indexOf ('@', 0) == -1 || pform.EMAIL.value.indexOf ('.', 0) == -1){ alert("'' " + pform.EMAIL.value + " '', is not valid Email Address."); return false; } else { // If reached this far then thank user, submit form and show redirect page alert ("'Thank you for your registration submission.'" +pform.FIRSTNAME.value + " '' \nPlease wait a moment while your data is sent to our server") // put your email address in here pform.action="mailto:[email protected]"; // put the redirect url in here absolute or relative urls can be used location.href="thanks.htm"; return true; }}//End Hiding --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE width=650 align=center border=0> <TBODY> <TR> <TD> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>This form was designed in replace of a cgi form to email with redirect. It uses both my own and modifications of other javascripts to achieve the result needed for a client with no cgi access. </FONT></P> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>To demonstrate:</FONT></P> <UL> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Fill out the form</FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>A redirected page will be shown on submission of the form data,</FONT> </LI></UL> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Directions for use of this script are below the example form.</FONT></P></TD></TR></TBODY></TABLE><P align=left> </P><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2><!-- Start Form --><!-- The action is called in the javascript function --></FONT></P><FORM name=pform onsubmit="JavaScript:return CheckFields(this);" method=post encType=text/plain><DIV align=center><BR></DIV><TABLE height=114 cellSpacing=0 cellPadding=0 width=450 align=center border=0> <TBODY> <TR width="442"> <TD colSpan=4><IMG height=1 src="" width=442></TD></TR> <TR> <TD width=2 bgColor=#cccccc rowSpan=17><IMG height=10 src="" width=1></TD> <TD bgColor=#006600 colSpan=2 height=25> <DIV align=center><IMG height=1 src="" width=1><FONT face="Arial, Helvetica, sans-serif" color=#bddbf8 size=3><B><FONT color=#ffffff>Sample Form</FONT></B></FONT></DIV></TD> <TD width=1 bgColor=#006600 height=37 rowSpan=17></TD></TR> <TR> <TD bgColor=#d2dfce colSpan=2 height=40> <P><BR><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> </B>Yes, add me to your mail list</FONT><FONT color=#000000>: <INPUT type=radio value=Yes name=ADD_TO_MAIL_LIST> <B>Yes <INPUT type=radio value=No name=ADD_TO_MAIL_LIST> No<BR><BR></B></FONT></P></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>First name:</FONT> </TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 name=FIRSTNAME> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>Last name: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 name=SURNAME> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>Phone: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT onblur=numericCheck() maxLength=10 size=25 name=PHONE> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>E-mail: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 value="-- your email --" name=EMAIL> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left> <FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B>* </B>Address: </FONT></DIV></TD> <TD vAlign=top width=180 bgColor=#d2dfce> <DIV align=left><TEXTAREA name=ADDRESS rows="1" cols="20"></TEXTAREA> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> *</B> Postcode: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT maxLength=5 size=4 name=POSTCODE> </DIV></TD></TR> <TR> <TD vAlign=center align=middle bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top align=middle bgColor=#d2dfce colSpan=2 height=12> <P align=center><FONT color=#000000><FONT color=#000000><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2><BR> <SCRIPT language=JAVASCRIPT type=text/javascript><!-- Add Hidden Fieldsdocument.write("<INPUT TYPE=hidden NAME='PAGE TITLE' VALUE='"+document.title+"'>")document.write("<INPUT TYPE=hidden NAME='URL' VALUE='"+document.URL+"'>")document.write("<INPUT TYPE=hidden NAME='DOMAIN' VALUE='"+document.domain+"'>")document.write("<INPUT TYPE=hidden NAME='REFERRERED BY' VALUE='"+document.referrer+"'>")document.write("<INPUT TYPE=hidden NAME='BROWSER USED' VALUE='"+navigator.appName+" "+navigator.appVersion+"'>")End hiding --> </SCRIPT><INPUT type=submit value=Submit name=Submit> </FONT></FONT></FONT></P> <P align=center> </P></TD></TR> <TR> <TD colSpan=4><IMG height=3 src="" width=442></TD></TR></TBODY></TABLE><BR></FORM><P><TABLE width=650 align=center border=0> <TBODY> <TR> <TD> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Directions for use:</FONT></P> <UL> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Copy all of the code on this page, </FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>C</FONT><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>hange the "action=mailto" to the designated email address<I> that will be receiving the formdata... <FONT color=#ff6633>(located in javascript function) </FONT></I></FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Change the redirect link to a url to be viewed after the form has been submitted.<I> Absolute or relative urls can be used <FONT color=#ff6633>(located in javascript function)</FONT></I></FONT> </LI></UL> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>On submission of the form, You will receive an email to the designated email address containing the form data and the redirect will show the page you have nominated.</FONT></P> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>You may find this javascript useful. Enjoy :-)</FONT></P> <P> </P></TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->