Javascript表单验证不适用于一个字段但与其他字段一起使用

时间:2017-04-12 23:50:11

标签: javascript validation

我出于某种原因无法使用我的脚本验证rep id字段。我花了好几个小时就无法解决这个问题。除了repid之外,所有其他字段都可以正常验证。

以下是我用于表单

的代码
       <form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="repsignup" id="repsignup">
      <h1>Janoo Rep Sign Up</h1>
      <p>Join our growing team and help rep Janoo out there in the world!</p>
      <p>&nbsp;</p>
      <h4>
        Name (First and Last):
        <input name="name" type="text" required="required" id="name" form="repsignup" placeholder="John Doe" size="70" maxlength="70" />
      </h4>
      <h4>
        <label for="repid">Rep ID:</label>
        <input name="repid" type="text" id="repid" form="repsignup" placeholder="DoeJ" size="32" maxlength="15" /> 
      </h4>
      <h4>
        <label for="email">Email:</label>
        <input name="email" type="email" required="required" id="email" form="repsignup" placeholder="Jdoe@gmail.com" size="89" maxlength="100" />
      </h4>
      <p><strong>* Your default password is &quot;password&quot; all lowercase! Please change it as soon as you log in.</strong></p>
      <p>&nbsp;</p>
      <p>*As of right now we only have reps in the United States</p>
      <h4>
        <label for="address">Address:</label>
        <input name="address" type="text" required="required" id="address" form="repsignup" placeholder="12345 Street" size="86" />
      </h4>
      <h4>
        <label for="city">City:</label>
        <input name="city" type="text" required="required" id="city" form="repsignup" placeholder="Detroit" size="92" />
      </h4>
      <h4>
        <label for="country">State:</label>
        <input name="State" type="text" required="required" id="address3" form="repsignup" placeholder="ex. MI" size="90" maxlength="2" />
      </h4>
      <h4>
        <label for="address5">Zipcode:</label>
        <input name="zipcode" type="text" required="required" id="address5" form="repsignup" placeholder="48201" size="87" />
      </h4>
      <h4>
        <label for="gender">Gender:</label>
        <select name="gender" size="1" id="gender" form="repsignup">
<option value="Null">No Answer</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
        </select>
      </h4>
      <h4>
        <label for="birthday">Birthday:</label>
        <input name="birthday" type="date" required="required" id="birthday" form="repsignup" />
      </h4>
      <h4>
        <label for="about">About you:<br />
        </label>
        <textarea name="about" cols="100" rows="10" maxlength="250" id="about" form="repsignup"></textarea>
      </h4>
      <h4>
        <label for="shirtsize">Shirt Size:</label>
        <select name="shirtsize" id="shirtsize" form="repsignup">
          <option value="as">Adult Small</option>
          <option value="am">Adult Medium</option>
          <option value="al">Adult Large</option>
          <option value="axl">Adult XL</option>
          <option value="axxl">Adult XXL</option>
        </select>
      </h4>
      <h4>What team are you appling for? (Select all that apply)  </h4>
      <p>
        <input name="skate" type="checkbox" id="skate" form="repsignup" />
        <label for="skate">Skateboard </label>
      </p>
      <p>
        <input name="snow" type="checkbox" id="snow" form="repsignup" />
        <label for="snow">Snowboard </label>
</p>
      <p>
        <input name="longboard" type="checkbox" id="longboard" form="repsignup" />
        Longboard
      </p>
      <p>
        <input name="video" type="checkbox" id="video" form="repsignup" />
        Video Production
      </p>
      <p>
        <input name="music" type="checkbox" id="music" form="repsignup" />
        Music Production
      </p>
      <p>
        <input name="model" type="checkbox" id="model" form="repsignup" />
        <label for="model">Modeling </label>
      </p>
      <p>&nbsp;</p>
      <h4>Links to your contacts</h4>
      <p>
        <label for="instagram">Instagram:</label>
        <input name="instagram" type="text" id="instagram" form="repsignup" size="86" maxlength="80" />
      </p>
      <p>
        <label for="facebook">Facebook:</label>
        <input name="facebook" type="text" id="facebook" form="repsignup" size="86" maxlength="80" />
</p>
      <p>
        <label for="twitter">Twitter:</label>
        <input name="twitter" type="text" id="twitter" form="repsignup" size="86" maxlength="80" />
</p>
      <p>
        <label for="youtube">YouTube:</label>
        <input name="youtube" type="text" id="youtube" form="repsignup" size="86" maxlength="80" />
</p>
      <p>
        <label for="website">Website:</label>
        <input name="website" type="text" id="website" form="repsignup" size="86" maxlength="80" />
</p>
      <p>
        <label for="otherlinks">Other:</label>
        <input name="otherlinks" type="text" id="otherlinks" form="repsignup" size="86" maxlength="80" />
      </p>
      <p>&nbsp;</p>
      <p><strong>Here is some stuff you should read up on:</strong></p>
      <p>Reps are paid out when they hit $5 in commison.</p>
      <p>Rep codes do NOT work with coupons.</p>
      <p>Default commison is 10% of all your sales but may vary.</p>
      <p>&nbsp; </p>
      <p><strong>For any of your media content to be used you must agree to the <a href="media terms.php" target="new">the terms and conditions</a></strong></p>
      <p>
        <input name="media" type="checkbox" disabled="disabled" id="media" form="repsignup" checked="checked" />
      I agree to <a href="media terms.php" target="new">the terms and conditions</a> for usage of my media and allow the promotion of me as a individual  </p>
      <p>
        <input name="inform" type="checkbox" id="inform" form="repsignup" checked="checked" />
        <label for="inform">Inform me of my sales</label> 
        as a rep
      </p>
      <p>
        <input name="DATE" type="hidden" id="DATE" value="<?php echo date('Y-m-d'); ?>" />
        <input name="com" type="hidden" id="com" form="repsignup" value="10" />
        <input name="country" type="hidden" id="country" value="United States of America" />
        <input name="password" type="hidden" id="password" form="repsignup" value="861aab8d5bdd93565a7454e5e5754f8f" />
        <input name="1" type="hidden" id="1" value="1" />
        <input name="discount" type="hidden" id="discount" value="5" />
        <input name="2" type="hidden" id="2" value="2" />
        <input name="enddate" type="hidden" id="enddate" value="3000-01-01 00:00:00" />
        <input name="avail" type="hidden" id="avail" value="30000000" />
      </p>
      <p>
      <?php print imageorsubmit(@$imgsubmit,$GLOBALS['xxSubmt'],'submit')?></p>
      <p>
        <input type="hidden" name="MM_insert" value="repsignup" />
      </p>
    </form>

这是我用来验证它的javascript

   <script type="text/javascript">
  $( document ).ready(function() {
      $("#repsignup").submit(function(event){
          //alert("The paragraph was clicked.");
          var name =        $("#name").val();
          var repid =       $("#repid").val();
          var address =     $("#address").val();
          var city =        $("#city").val();
          var state =       $("#address3").val();
          var zipcode =     $("#address5").val();
          var gender =      $("#gender").val();
          var birthday =    $("#birthday").val();
          var about =       $("#about").val();
          var skate =       $("#skate").val();
          var snow =        $("#snow").val();
          var longboard =   $("#longboard").val();
          var video =       $("#video").val();
          var music =       $("#music").val();
          /*Social fields*/
          var instagram =   $("#instagram").val();
          var facebook =    $("#facebook").val();
          var twitter =     $("#twitter").val();
          var youtube =     $("#youtube").val();
          var website =     $("#website").val();
          var otherlinks =  $("#otherlinks").val();

          //alert(name.split(" ").length);
          var a = isValidCharacter(name);
          //alert(a);

          /*Name validation*/
          if(name.split(" ").length==2 && a)
            ;
          else{
            alert('Please enter first and last name separated by a space. No special character is allowed');
            event.preventDefault();
          }

          validRepid = isValidCharacter(repid);
          if(repid.indexOf('>') > -1 || repid.indexOf('<') > -1){
            alert('Rep ID should not have any special character.');
            event.preventDefault();
          }

          validAddress = isValidCharacter(address);
          if(address.indexOf('>') > -1 || address.indexOf('<') > -1){
            alert('Address should not have any special character.');
            event.preventDefault();
          }

          validCity = isValidCharacter(city);
          if(city.indexOf('>') > -1 || city.indexOf('<') > -1){
            alert('City should not have any special character.');
            event.preventDefault();
          }

          validState = isValidCharacter(state);
          if(state.indexOf('>') > -1 || state.indexOf('<') > -1){
            alert('State should not have any special character.');
            event.preventDefault();
          }

          validZipcode = isValidCharacter(zipcode);
          if(zipcode.indexOf('>') > -1 || zipcode.indexOf('<') > -1){
            alert('Zipcode should not have any special character.');
            event.preventDefault();
          }

          validGender = isValidCharacter(gender);
          if(gender.indexOf('>') > -1 || gender.indexOf('<') > -1){
            alert('Gender should not have any special character.');
            event.preventDefault();
          }

          if (birthday.indexOf('>') > -1 || birthday.indexOf('<') > -1)
          {
            alert('Birthday should not have any special character.');
            event.preventDefault();
          }

          validAbout = isValidCharacter(about);
          if(!validAbout){
            alert('About field should not have any special character.');
            event.preventDefault();
          }

          var flag = false;
          if($("#skate").prop("checked"))
            flag = true;
          if($("#snow").prop("checked"))
            flag = true;
          if($("#skate").prop("checked"))
            flag = true;
          if($("#longboard").prop("checked"))
            flag = true;
          if($("#video").prop("checked"))
            flag = true;
          if($("#music").prop("checked"))
            flag = true;
          if($("#model").prop("checked"))
            flag = true;

          if(flag==false){
            alert('Please select at least one team to apply for.');
            event.preventDefault();
          }

          if(instagram.indexOf('>') > -1 || instagram.indexOf('<') > -1){
            alert('Instagram field should not have any special character.');
            event.preventDefault();
          }
          if(facebook.indexOf('>') > -1 || facebook.indexOf('<') > -1){
            alert('Facebook field should not have any special character.');
            event.preventDefault();
          }

          if(twitter.indexOf('>') > -1 || twitter.indexOf('<') > -1){
            alert('Twitter field should not have any special character.');
            event.preventDefault();
          }
          if(youtube.indexOf('>') > -1 || youtube.indexOf('<') > -1){
            alert('Youtube field should not have any special character.');
            event.preventDefault();
          }
          if(website.indexOf('>') > -1 || website.indexOf('<') > -1){
            alert('Website field should not have any special character.');
            event.preventDefault();
          }
          if(otherlinks.indexOf('>') > -1 || otherlinks.indexOf('<') > -1){
            alert('Otherlinks field should not have any special character.');
            event.preventDefault();
          }

      });
  });

  function isValidCharacter(str){
    return !/[~`#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
  }
</script>

1 个答案:

答案 0 :(得分:0)

您可以验证所有字段,而无需获取每个单独的值,只使用一个函数:

$(document).ready(function(){

  var allFine = true;

  function valdiate(){
    var value = $(this).val();
    if(value !== null && value.trim().length() > 0 && !value.match(/[\<\>]/));
    var allFine = false;
    $(this).css('border', '1px solid red');
  }

  // selector for all required input and textarea tags in your html
  $('form').find('input:required, textarea:required').each(validate); 

  $('form').on('submit', function(){
    if(!allFine) {
      event.preventDefault();
      event.stopPropagination();
      alert('there is a failure, have a look on the red bordered fields');
    }
    // otherwise the form is submitted normal
  });
})

如果您需要检查所有输入字段以进行验证,请删除选择器中的:required标志,并从if

中删除null和length检查

请记住,如果您使用html5,您还可以使用pattern属性来输入带有正则表达式的元素:

<input name="myInput" type="text" pattern="[a-zA-Z0-9 .,-]" required>

或其他一些你想要的正则表达式