需要对名称和电子邮件字段进行非常基本的Java脚本形式验证

Question

我正在尝试验证表单中的几个字段，我不想更改任何内容，因为所有内容都是相互链接的，并且我不想弄乱任何内容。 基本上，我要验证的是姓名和电子邮件字段，一旦成功，我将转到其他字段。 我尝试使用下面的javascript代码来完成此操作，但对我而言无效。

注意：我需要使用Javascript而不是Jquery进行操作 ，并且我需要不复杂的基本Javascript，因为我对Javascript完全是新手 。 任何帮助将不胜感激。

这是小提琴链接

  var frmvalidator = new Validator("form1"); frmvalidator.addValidation("FirstName","req","Please enter your First Name"); frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20"); frmvalidator.addValidation("LastName","req"); frmvalidator.addValidation("LastName","maxlen=20"); frmvalidator.addValidation("Email","maxlen=50"); frmvalidator.addValidation("Email","req"); frmvalidator.addValidation("Email","email"); 

 <h1> Contact Form</h1> <form id="form1" class="campus" method="post"> <div class="form_description"> <h2>User Feedbacks</h2> <p>Please give us your feedbacks.</p> </div> <ul> <li> <label class="description" >Name*</label> <input type="text" name="FullName" id="FirstName" maxlength="50" size="8" /> <label for="FirstName"> First </label> <input type="text" name= "user" id="LastName" maxlength="50" size="8"/> <label for="LastName"> Last </label> </li> <li > <label for="Email" class="description">Email*:</label> <input type="email" name="Email" id="Email" maxlength="55"/> </li> <li> <label class="description" >Reason for Contacting:</label> <input name="choice" id="Hospitality" type="checkbox" value="1"/> <label for="Hospitality"> About Website </label> <input name="choice" id="Technology" type="checkbox" value="1" /> <label for="Technology"> About Deals </label> <p class="guidelines" ><small>Reason for contacting. Please select all that are applicable</small></p> </li> <li> <label class="description" >Will you Recommend us to anyone.</label> <select> <option value="" ></option> <option value="1" >Yes</option> <option value="2" >No</option> <option value="3" >Maybe</option> </select> </li> <li> <label for="AnyQuestions" class="description" >Any Questions Or Suggessions </label> <textarea name="AnyQuestions" id="AnyQuestions" class="element textarea large"></textarea> </li> <li> <label class="description" >Do You want to receive special offers. Please Select One</label> <input type="radio" name="opinion" value="1" /> <label>Yes</label> <input type="radio" name="opinion" value="2" /> <label> No </label> </li> <li class="buttons"> <input type="submit" name="submit" value="Submit" /> </li> </ul> </form> 

Answer 1

您必须包括“ Validator”类的定义：

function Validator(frmname, alertMethod) {.....}

这是在代码顶部复制的有效Validator类： https : //jsfiddle.net/8qsLvx54/1/

该代码来自http://www.rockcliffepark.com/rp/CONTACT_validator.js （来自Google搜索），您可能想尝试查找此代码的来源…

Answer 2

JavaScript没有提供帮助验证表单的Validator函数。 相反，您可以像jQuery一样构建一个或下载一个，这些额外的代码段称为库。

现在，浏览器不了解什么是Validator ，因此会导致错误。 但是，如果包括Parsley或Verify.js之类的内容，并根据其文档编写一些代码，则可以归档所需的结果。

Answer 3

如果不将复杂性隐藏在JavaScript库或框架中，您将无法获得所需的简单JavaScript解决方案。 但是，没有JavaScript的解决方案呢？ 您想要的大多数内容都可以使用纯HTML5完成 。

您已经使用了maxlength属性，只是将其设置为与尝试在Javascript中验证的值不同的值。 将名称部分设置为20 ，将电子邮件地址设置为50 ，用户甚至无法输入更多字符。

<input type="text" name="FullName" id="FirstName" maxlength="20" size="8"/>

添加required属性，如果任何现代浏览器输入的内容与type属性的值都不匹配，则会突出显示该属性。

<input type="text" name="FullName" id="FirstName" maxlength="20" size="8" required/>

对于电子邮件字段您已经使用了type="email"所以你几乎所有的设置只需添加required在那里。

<input type="email" name="Email" id="Email" maxlength="50" required/>

请注意 ，根据浏览器的不同，被认为构成有效电子邮件地址的内容也有所不同。 （请参阅http://www.the-art-of-web.com/html/html5-form-validation/部分'INPUT type =“ email”' ）

要获取一些自定义错误消息， 可以设置title属性 ：

<input type="text" name="FullName" id="FirstName" maxlength="20" size="8" title="Please enter your First Name (20 characters max.)" required />

（在StackOverflow代码段中不起作用，也不知道为什么会这样。）

 <h1> Contact Form</h1> <form id="form1" class="campus" method="post"> <div class="form_description"> <h2>User Feedbacks</h2> <p>Please give us your feedbacks.</p> </div> <ul> <li> <label class="description">Name*</label> <input type="text" name="FullName" id="FirstName" maxlength="20" size="8" title="Please enter your First Name (20 characters max.)" required /> <label for="FirstName">First</label> <input type="text" name="user" id="LastName" maxlength="20" size="8" required /> <label for="LastName">Last</label> </li> <li> <label for="Email" class="description">Email*:</label> <input type="email" name="Email" id="Email" maxlength="50" required /> </li> <li> <label class="description">Reason for Contacting:</label> <input name="choice" id="Hospitality" type="checkbox" value="1" /> <label for="Hospitality">About Website</label> <input name="choice" id="Technology" type="checkbox" value="1" /> <label for="Technology">About Deals</label> <p class="guidelines"><small>Reason for contacting. Please select all that are applicable</small> </p> </li> <li> <label class="description">Will you Recommend us to anyone.</label> <select> <option value=""></option> <option value="1">Yes</option> <option value="2">No</option> <option value="3">Maybe</option> </select> </li> <li> <label for="AnyQuestions" class="description">Any Questions Or Suggessions</label> <textarea name="AnyQuestions" id="AnyQuestions" class="element textarea large"></textarea> </li> <li> <label class="description">Do You want to receive special offers. Please Select One</label> <input type="radio" name="opinion" value="1" /> <label>Yes</label> <input type="radio" name="opinion" value="2" /> <label>No</label> </li> <li class="buttons"> <input type="submit" name="submit" value="Submit" /> </li> </ul> </form>