0

there is an input type box as this:

   <input type="text" name="xlnum" id="xlnum" />
<input type="submit" value="Submit" id="submit" />

the allowed value that are inputted in the text box is number. but it style must be as this:

number1,number1,number1,number1,number1.... eg(1,2,,12,35,654,....)

if the user types the wrong style. i want to give him a tip use jquery.how do i do. i don't know how to write the if part. eg:

$('#submit').click(function() {
 if($('#xlnum').val()=='' && ...)...
})
zhuanzhou
  • 2,409
  • 8
  • 33
  • 51
  • 1
    need regex see : http://stackoverflow.com/questions/3455988/regex-validation-for-numbers-with-comma-separator – Haim Evgi Jun 12 '11 at 05:33

2 Answers2

1

I think that the following will work for you:

$('#submit').closest('form').submit(function(e)
{
  // Validate that the input is in the proper format.
  if ( ! $('#xlnum').val().match(/^\d+(,\d+)*$/) )
  {
    alert('Please enter a valid value.');

    return false;
  }
});

You'll notice that I used $('#submit').closest('form').submit() instead of $('#submit').click(). It's better to apply the validation on the form's submit event rather than the button just in case. If you assign an ID attribute to the form, you can shorten that line to $('#form').submit(function(e)...

Francois Deschenes
  • 24,816
  • 4
  • 64
  • 61
  • zhuanzhou, I make a small mistake which I've corrected in the sample above. I've tested and made sure that the code above works as intended. Sorry for the inconvenience. – Francois Deschenes Jun 12 '11 at 07:38
  • not at all,but there is also an error for me. when i use this $('#submit').closest('form').submit(function(e). the code can't work. if i change it into $('#submit').click(function(e). the code is ok. – zhuanzhou Jun 12 '11 at 08:22
  • Is your input and submit button wrapped inside a FORM element? To be valid HTML, it should be. If you don't have one, that would be why. It's looking for the form that's the closest to the button (going up the hierarchy.) – Francois Deschenes Jun 12 '11 at 17:44
1
<html>                                                                  
<head>                                                                  
<link rel="stylesheet" type="text/css" href="thickbox.css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">                                         
$(document).ready(function() {

    $('#csv').submit(function(event){
        var $mkay = $('#msg').text();
        console.log("kk:" +$mkay);

        if ($mkay != "mkay"){
            event.preventDefault(); // stop submission
        }



    });

    $('#go').click(function() {

        var val = $('#numbaz').attr('value');

        if ( val.match(/[[\d]+[,]?]?/)){
            $('#numbaz') .css('background','green');
            $('#msg').text("mkay");
        } else {
            $('#numbaz') .css('background','red');
        }

        $('#csv').submit(); // resubmit
    })
});
</script>
</head>
<body>
<form method="get" id="csv">
<input id="var" type="hidden" name="var" value="trolololol" />
<input id="numbaz"  type="text" name="numbaz" value="" />
<input id="go"      type="submit"  value="go" />
</form>
<p id="msg"><p>
</body>
</html>

BAM!

That is the simplest form verification Method I know. Make sure your jquery.js is recent enough. I have not tested any other than version 1.6.1. And I think the other guys regex is more elegant.

The guy above me failed, hahah. I thought his method was kinda short and neat but doubted it would work. I was right. It goes into infinite recursion.

Ярослав Рахматуллин
  • 7,599
  • 1
  • 41
  • 60