简体   繁体   中英

javascript validations for HTML form

Some one help me out in javacript validations for the form below where it should check no numbers/numericals shoud be there in fname and lname, stnumber shoud have specific size (size) state and pincode should match is it possible with javascript validations?????

<form id="user" method="post" action="" onsubmit="return validateForm()">
 <span>First Name:</span>                       
    <input type="text" class="input" id="fname" name="fname" required>
  <span>Last Name</span>
<input type="text" class="input" id="lname" name="lname" required>
  <span>Student Number</span>
<input type="text" class="input" id="stn" name="stn" required>
 <span>Student address</span>
<input type="text" class="input" id="stad" name="stad" required>
 <span>Town/suburb</span>
<input type="text" class="input" id="town" name="town" required>
 <span>State</span>
<select name="state" id="state">
<option selected>--select--</option>
<option>AAA</option>
<option>BBB</option>
    </select>                               
<span>Postal Code</span>
<input type="text" class="input" id="pcode" name="pcode" required>

I really don't understand the question but if you want user to enter a "specific" size, why don't you just use

maxlength="size"

property?

EDIT: Javascript Part

  function isCharKey(evt){
       var charCode = (evt.which) ? evt.which : event.keyCode
       return !(charCode < 31 && (charCode > 48 || charCode < 57));
 }
 var state= document.getElementById("state").value;
 var pcode= document.getElementById("pcode").value;
if (state != pcode) {
    alert("State and Pcode doesn't match");
}

in your html

 <input type="text" class="input" id="fname" name="fname" required onkeypress="return isCharKey(event);">
 <input type="text" class="input" id="lname" name="lname" required onkeypress="return isCharKey(event);">
 <input type="text" class="input" id="stn" name="stn" required maxlength="10">

That should do it for entering only characters but not numbers

EDIT 2:

<script type="text/javascript">
function isCharKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    return !(charCode < 31 && (charCode > 48 || charCode < 57));
}
function validateForm() {
    var state= document.getElementById("state").value;
    var pcode= document.getElementById("pcode").value;
    if (state != pcode) {
        alert("State and Pcode doesn't match");
    }   
}</script>

Write this at the bottom of your page

If your project allowes you to, you could go for HTML5 validation using specific HTML5 attributes such as required, min, max and pattern. See more information on W3Schools.com and html5pattern.com

If Javascript is a requirement, there's an ample selection of validation libraries out there such as jQuery Validate or Parsley that are perfectly capable of doing what you want to achieve.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM