How to validate an element is exist in form or not using JS_问答_开发者

How to validate an element is exist in form or not using JS

开发者 https://www.devze.com 2023-02-14 04:37 出处：网络

<pre> <script> // here i want to check form validation //if i use for loop txtbox2 is not exist in my form so i am getting Js error

<pre>
<script>
// here i want to check form validation
//if i use for loop txtbox2 is not exist in my form so i am getting Js error


//Don't write individual validation
//check element is exist or not if exist check for validation

//I need know how to check an element is exist or not
</script>

<form
<input type="text" id="txtbox1" name="txtbox1" />*
<input type="text" id="txtbox3" name="txtbox3" />*
<input type="text" id="txtbox4" name="txtbox4" />*
<input type="text" id="txtbox5" name="t开发者_高级运维xtbox5" />*
<input type="text" id="txtbox15" name="txtbox15" />*
<input type="text" id="txtbox28" name="txtbox28" />*

</pre>

Apply a class to them:

<input type="text" id="txtbox1" name="txtbox1" class="txt" />
<input type="text" id="txtbox3" name="txtbox3" class="txt" />
<input type="text" id="txtbox4" name="txtbox4" class="txt" />
<input type="text" id="txtbox5" name="txtbox5" class="txt" />
<input type="text" id="txtbox15" name="txtbox15" class="txt" />
<input type="text" id="txtbox28" name="txtbox28" class="txt" />

and go about like this:

function validate(){
  var elms = document.getElementsByTagName('input');

  for (var i = 0; i < elms.length; i++){
    if (elms[i].className === 'txt'){
      if (elms[i].value === ''){
          alert('Make sure to fill in all required fields');
          // now focus it
          elms[i].focus();
          return false;
      }
    }
  }

  return true;
}

And then call the above function like this:

<form ............ onsubmit="return validate();">

Post your code.

Easiest way to validate is by using jquery validate plugin.(Why write your own code when somebody else has done the same?).

An example

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#feedbackform").validate();
  });
</script>

<body>
<form id = "feedbackform" method = "POST" action = "">
 <h3><span>Contact Us</span></h3>
 <fieldset>
  <legend>Contact form</legend>

  <label for="id_name">Name *</label>
  <input id="id_name" class="required" type="text" name="name" />

  <label for="id_email">Email</label>
  <input id="id_email" type="email" name="email" class="email"/>

  <label for="id_comments">Message *</label>
  <textarea id="id_comments" class="required" name="comments"></textarea>
  <button type="submit">Send</button>       

 </fieldset>        
</form>

The elements that you want to validate add class="required". I hope the example provided is self-explainatory

You can get a reference to the element and check if the reference is null or not:

for (var i=1; i<=100; i++) {
  var elem = document.getElementById('txtbox' + i);
  if (elem != null) {
    ...
  }
}

Another approach is to look at the elements in the form, but then you need a way to access the form of course:

var elems = document.getElementById('IdOfTheForm').elements;
for (var i=0; i<elems.length; i++) {
  var elem = elems[i];
  if (elem.tagName == 'INPUT' && elem.type == 'text' && elem.id.length > 6 && elemt.id.substr(0,6) == 'txtbox') {
    ...
  }
}