简体   繁体   中英

form validation using jquery

I'm trying to validate a sample form. I need the "name" section not to start with digit. If the name starts with digit then it'll show error...how do I do it?

<!DOCTYPE html>
<head>
 <script src="js/modernizr-2.5.3.min.js"></script>
 <script src="assets/js/jquery-1.7.1.min.js"></script>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/jquery.validate.min.js"></script>
 <script src="assets/js/prettify/prettify.js"></script>
<script src="script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function(){
$('pre').addClass('prettyprint linenums');
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22151549-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +   '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];   s.parentNode.insertBefore(ga, s);})();
 </script>
 <body>
  <form action="" id="contact-form" class="form-horizontal">
  <label class="" for="name">Your Name</label>                          
  <input type="text" class="input-xlarge" name="name" id="name" >
  <br/>

  <label class="control-label" for="email">Email Address</label>
  <input type="text" class="input-xlarge" name="email" id="email">
  <br/>

<label class="control-label" for="subject">Subject</label>
<input type="text" class="input-xlarge" name="subject" id="subject">
<br/>

<label class="control-label" for="message">Your Message</label>
<textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
 <br/>

 <button type="submit" class="btn btn-primary btn-large">Submit</button>
 </form>
</body>
</html>
//returns number at the beginning or NAN
var validate = parseInt(formData);  

//if there was a number in front of the string, still the number
//if there was a NaN, this returns NaN
validate = +validate                

if (validate || validate === 0) {
  alert('Not a name!')
}

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed. MDN

Since you're using html5 doctype, do the below.

replace <input type="text" class="input-xlarge" name="name" id="name" >

with this

<input type="text" class="input-xlarge" name="name" id="name" pattern="^[^0-9].*" title="Cannot start with digit" />

This will work. This will also alert the user. You don't need to do anything.

Mark it as answer if it helps :)

You can do it like this:

$(function()
{
    var str;
    $('#name').change(function()
    {
    str = ('#name').val();
    if(!isNaN(str[0])
    {
         alert('error') //of course you should change the error message ;)
    }
    });
});

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