Fatal编程技术网
  • forms/
  • Forms 表单验证问题

Forms 表单验证问题

forms validation

Forms 表单验证问题,forms,validation,Forms,Validation,====================================================================================== <!doctype html> <html> <head> <meta charset="utf-8"> <title>Assignment1</title> <link rel="styleshee

======================================================================================

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Assignment1</title>
    <link rel="stylesheet" href="valid.css">
    <script type="text/javascript" src="formValid.js"></script>

    </head>

    <body>
      <h2>Info Grabber</h2>
    <span class="required_fields">* Denotes Required Field</span> 
    <!--<form id = "contact_form" action="" >/-->
    <form id="contact_form" action = "#" method="post" onSubmit="return validateForm(this)" >
     <!--  <table> -->
     <div class="name">
        <div>
                    <label for='name'>Name<span class="red">*</span></label>
                    <input type='text' name='name' id='name' placeholder="First and last name" >

                    <div class="fixed" id="nameError">
                    Please enter your first and last name with a space between!</div>
        </div>
    </div>

    <div class="address1">
        <div>
                    <label for='address1'>Address Line 1<span class="red">*</span></label>
                    <input type='text' name='address1' id='address1' >
                    <div class="fixed" id="address1error">

                     Please enter your address!</div>
        </div>
    </div>

    <div class="address2">
        <div>
                    <label for='address2'>Address Line 2</label>
                    <input type='text' name='address2' id='address2'>
        </div>

        <div>
          <label for="county">County<span class="red">*</span></label>
         <select id="county" name="county">
              <option value="" selected>Please select...</option>
              <option value="01">Andivim
              <option value="02">Armagh
              <option value="03">Carlow
              <option value="04">Cavan
              <option value="05">Clare
              <option value="06">Cork
              <option value="07">Derry
              <option value="08">Donegal
              <option value="09">Down
              <option value="10">Dublin
              <option value="11">Fermanagh
              <option value="12">Galway
              <option value="13">Kerry
              <option value="14">Kildare
              <option value="15">Kilkenny
              <option value="16">Laois
              <option value="17">Leidivim
              <option value="18">Limerick
              <option value="19">Longford
              <option value="20">Louth
              <option value="21">Mayo
              <option value="22">Meath
              <option value="23">Monaghan
              <option value="24">Offaly
              <option value="25">Roscommon
              <option value="26">Sligo
              <option value="27">Tipperary
              <option value="28">Tyrone
              <option value="29">Waterford
              <option value="30">Westmeath
              <option value="31">Wexford
              <option value="32">Wicklow
            </select>
          <div id="countyError" class="fixed">
          Please select your county!</div>
         </div>   
    </div>


        <div class="gender">
          <label>Gender<span class="red">*</span></label>
          <input type="radio" name="gender" id="male" value="m">Male
            <input type="radio" name="gender" id="female" value="f" >Female
          <div id="genderError" class="fixed">
          Please select your gender! </div>
        </div>


        <div class="preferences">
          <label>Preferences<span class="red">*</span></label>
          <input type="checkbox" name="color" id="red" value="r">Red
            <input type="checkbox" name="color" id="green" value="g">Green
            <input type="checkbox" name="color" id="blue" value="b">Blue
          <div id="colorError" class="fixed">Please select a color! </div>
        </div>


        <div class="phone">
          <label for="phone">Phone<span class="red">*</span></label>
          <input type="text" id="phone" name="phone" placeholder="Eg. 0871234567">
          <div id="phoneError" class="fixed">
         Please enter a valid phone number with 10 digits in length! </div>
        </div>


        <div class="email">
          <label for="email">Email<span class="red">*</span></label>
          <input type="text" id="email" name="email" placeholder="example@domain.com">
          <div id="emailError" class="fixed">
         Please enter a valid email in the format "johndoe@domain.com"! </div>
        </div>


        <div class="password1">
          <label for="password1">Password (6-8 characters)<span class="red">*</span></label>
          <input type="password" id="password1" name="password1">
          <div id="password1Error" class="fixed">
          Please enter a valid password containing at least one uppercase letter and one number!</div>
        </div>


        <div class="password2">
          <label for="password2">Verify password<span class="red">*</span></label>
          <input type="password" id="password2" name="password2">
          <div id="password2Error" class="fixed">
         Passwords do not match, please re-enter! </div>
        </div>


        <div>
          <label>
          <input type="submit" value="SEND" id="submit">
           </label>
        </div>

        <div>
            <label>
            <input type="reset" value="CLEAR" id="reset">
          </label>
        </div>


   <!--   </table> -->
    </form>
    </body>
    </html>




</form>
</body>
</html>

valid.css

    .red {    
    color: red;
}
.input.error {  /* for the error input text fields */
   border: 1px red inset;
   padding: 2px;
}
.error {
    visibility: visible;
    color: red;
    display: inline-block;
}
/*
table {
    border: 0;
}
td {
    margin: 0;
    padding: 3px 10px 3px 3px;
}
*/

label 
{
    display: inline-block;
    width: 170px;
    margin-top:10px;
    margin-bottom:10px; 

}
.colorLabel {
    border: thin solid red;
}
.unColorLabel {
    border: thin solid #3FE916;
}
.fixed {
    visibility: hidden;
    display: inline-block;
}
.required_fields {
    color: red;
}

formValid.js
函数validateForm（）
{
var name=document.getElementById（“名称”）；
if（name.length<5 | |！name.match（/[A-Za-z]$/））
{
document.getElementById（“名称”）.className=“colorLabel”；
document.getElementById（“nameError”）.className=“error”；
}
其他的
{
document.getElementById（“name”）.className=“unColorLabel”；
document.getElementById（“nameError”）.className=“已修复”；
}
var address1=document.getElementById（“address1”）；
如果（address1.length==0 | |！address1.match（/[A-Za-z]$/）
{
document.getElementById（“address1”）.className=“colorLabel”；
document.getElementById（“address1Error”）.className=“error”；
}
其他的
{
document.getElementById（“address1”）.className=“unColorLabel”；
document.getElementById（“address1Error”）.className=“fixed”；
}
//如果选择了正确的元素，则返回true
var country=document.getElementById（“县”）；
如果（县==“-1”）
{
document.getElementById（“county”）.className=“colorLabel”；
document.getElementById（“countyError”）.className=“error”；
}
其他的
{
document.getElementById（“county”）.className=“unColorLabel”；
document.getElementById（“countyError”）.className=“fixed”；
}
//如果选中其中一个单选按钮，则返回true
var-gender=document.getElementsByName（“性别”）；
var isChecked=false；
对于（变量i=0；i
即使您指出它不工作，您是否可以共享您的JSFIDLE链接？这是JSFIDLE链接。我已经更改了javascript，但它仍然不起作用。您的HTML有几个问题。到目前为止，我发现了以下几个选项：1）头部有一个额外的结束脚本标记，2）表中有两个不在表行中的TDs，以及3）不一致的选择选项（只有一个有结束标记，尽管我认为大多数浏览器都可以理解为ok）。我试图清理这些，但JSFIDLE仍然抱怨HTML和JavaScript没有验证。除非您特别需要在分配任务时使用JSFIDLE，否则如果您简单地解释一下您遇到的原始问题，可能会更好？嗨，德里克，我只使用JSFIDLE来验证javascript。我现在对代码做了一些修改，但仍然无法使其正常工作。我试图做的是，当输入错误的信息时，文本区域周围的边框将变为红色，并且在输入正确的信息之前，错误消息将以红色显示在其旁边。 
formValid.js


    function validateForm()
    {

var name = document.getElementById("name");
if(name.length < 5 || !name.match(/[A-Za-z ]$/))
{
    document.getElementById("name").className = "colorLabel";
    document.getElementById("nameError").className = "error";
}
else
{
    document.getElementById("name").className = "unColorLabel";
    document.getElementById("nameError").className = "fixed";
}


var address1 = document.getElementById("address1");

if(address1.length === 0 || !address1.match(/[A-Za-z ]$/))
{
    document.getElementById("address1").className = "colorLabel";
    document.getElementById("address1Error").className = "error";
}
else
{
    document.getElementById("address1").className = "unColorLabel";
    document.getElementById("address1Error").className = "fixed";
}


// Return true if correct element is selected

var county= document.getElementById("county");

if(county == "-1")
{
    document.getElementById("county").className = "colorLabel";
    document.getElementById("countyError").className = "error";
}
else
{
    document.getElementById("county").className = "unColorLabel";
    document.getElementById("countyError").className = "fixed";
}



// Return true if the one of the radio buttons is checked


var gender = document.getElementsByName("gender");
   var isChecked = false;
   for (var i = 0; i < gender.length; i++)
    {
      if (gender[i].checked) 
      {
         isChecked = true;  // found one element checked
         document.getElementById("genderError").className = "fixed";
         break;
      }
      else
      {

    document.getElementById("genderError").className = "error";  
      }
    }

var color = document.getElementsByName("color");
   var isChecked2 = false;
   for (var j = 0; j < color.length; j++) 
   {
      if (color[j].checked) 
      {
         isChecked2 = true;  // found one element checked
         document.getElementById("colorError").className = "fixed";
         break;
      }
      else
      {

    document.getElementById("colorError").className = "error";  
      }
   }

var phone = document.getElementById("phone");
if(inputValue.length != 10 || (inputValue.search(/^[0-9]+$/) == -1))
{

    document.getElementById("phone").className = "colorLabel";
    document.getElementById("phoneError").className = "error";
}
else
{
    document.getElementById("phone").className = "unColorLabel";
    document.getElementById("phoneError").className = "fixed";
}


var email = document.getElementById("email");
   var atPos = email.indexOf("@");
   var dotPos = email.lastIndexOf(".");
if((atPos < 1) && (dotPos < atPos + 1) && (inputValue.length < dotPos + 2))
{

    document.getElementById("email").className = "colorLabel";
    document.getElementById("emailError").className = "error";
}
else
{
    document.getElementById("email").className = "unColorLabel";
    document.getElementById("emailError").className = "fixed";
}

var password1 = document.getElementById("password1");
var allowed = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,8}$/;  
var inputValue = password1.value.trim();
if(!(inputValue.value.match(allowed)))
{

    document.getElementById("password1").className = "colorLabel";
    document.getElementById("password1Error").className = "error";
}
else
{
    document.getElementById("password1").className = "unColorLabel";
    document.getElementById("password1Error").className = "fixed";
}


var password2 = document.getElementById("password2");
if(password1.value != password2.value)
{

    document.getElementById("password2").className = "colorLabel";
    document.getElementById("password2Error").className = "error";
}
else
{
    document.getElementById("password2").className = "unColorLabel";
    document.getElementById("password2Error").className = "fixed";
}

   }




enter code here