How to validate a form using javascript so that user enters atleast the minumum num ber of charecaters required?_问答_开发者

How to validate a form using javascript so that user enters atleast the minumum num ber of charecaters required?

开发者 https://www.devze.com 2023-03-27 16:25 出处：网络

I don`treally know JSso have to do it using php strlen() function . But I would like to reduce the load on the server. here is my signup form :

I don`t really know JS so have to do it using php strlen() function . But I would like to reduce the load on the server. here is my signup form :

<blockquote>
    <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
        <h3><i>Username </i></h3> <input type="text" name="new_user_name" size="14" style="width:254px; height:24px; " /><br/>
        <h3>开发者_JAVA百科<i>Password  </i></h3><input type="Password" name="new_user_password" SIZE="14" style="width:254px; height:24px;" /><br/>
        <h3><i>Email   </i></h3><input type="text" name="new_user_mail" size="14" style="width:254px; height:24px;" /><br/><br/>
        <input type="submit" name="submitok" id="mysubmit" value="Sign Up!" />
    </form>
</blockquote>

You should still have your server-side check. It is a very bad idea to rely on client-side verification of inputs. What if the user has Javascript disabled? What if the user is using their own form?

As for your question, you can do the following:

<input type="text" id="signupbox" onchange="verifyLength(this)" />
<span id='warning'></span>

(Javascript code)
function verifyLength(e) {
  if (e.value.length > 5) { // Change 5 to whatever you want as your minimum length
    document.getElementById('warning').innerHTML = "Your input is too short!"
  } else {
    document.getElementById('warning').innerHTML = "";
  }
}

On submit:

document.getElementById('form_id_here').addEventListener('submit', function(e) {
    if (document.getElementById('input_id_here').length < minimum_length_here)
        e.preventDefault();
}, false);

On change:

document.getElementById('input_id_here').addEventListener('change', function(e) {
    if (e.target.length < minimum_length_here)
        // do stuff
    else
        // do other stuff
}, false);

Note that .length measures in UTF-16 values, which are not the same as Unicode codepoints, if you have characters outside of the BMP.

Also note that you should keep the server-side check in place; if the user disables JavaScript and you don't have server-side validation, then your intended restrictions can be bypassed.

You may like to check this out:

http://docs.jquery.com/Plugins/validation#Validator

See the various validation methods and plenty more than you asked for : http://docs.jquery.com/Plugins/validation#Validator

Hope this helps - its simple and easy!

There is many ways to do this. Like what Stackoveflow does in it's comment filed that count charecters per keystroke and inform user how many other charecters needed, you can do something like this.( I didn't ran the code) HtML:

<label id="name'>Name:<input type="text"/><span></span></label>

JavaScript(jQuery):

 $('#name input').bind('keydown', function(e){
     if($('#name input')[0].val().length < 5){
     $('#name span').text('You need ' + (5 - $('#name input')[0].val().length ) + 'more charecters');
     }
     else{ $('#name span').text('');}
    });

There are a couple ways, evidenced by the number of responses. This is another, similar to Jared Ng's answer but using onkeypress and checking to make sure the input is not a control key otherwise when you hit your limit tab and backspace won't work for you.

    <html>
        <head>
            <script type="text/javascript">
                function limit_length(event, max_length) {
                    event = (event) ? event : window.event;
                    var keycode = (event.which) ? event.which : event.keyCode;
                    if (keycode > 48) {
                        if (document.myform.myinput.value.length >= max_length) return false;
                    }
                    return true;
                }
            </script>
    </head>

    <body>
        <form name="myform">
            <input type="text" name="myinput" onkeypress="return limit_length(event, 5)"/>
        </form>
    </body>