jQuery HTML5 input valid live

Question

I have an input field that looks like this:

<input type="number" id="month" placeholder="Month" min="1" max="12" required>

Problem

When I use it in a form it requires a number to be between 1 and 12.
I use jQuery to copy the information with keyup, in my case to a href. In this case it's not "protected" by any requirements in the field.

Example

Should not be valid:

<a href="?month=abc">

Should be valid:

<a href="?month=12">

Can I use the validation from the built in HTML5 input somehow? I have different fields with different requirements.

When you copy the value you can validate it there. Show us the script you have for doing that. — Reinstate Monica Cellio, Oct 31 '13 at 13:50
If you really want to hook into the validation, there's this workaround: http://stackoverflow.com/questions/7548612/triggering-html5-form-validation/7562439#7562439 — Robb, Oct 31 '13 at 13:58

score 0 · Answer 1 · answered Oct 31 '13 at 13:53

When you are capturing the value on the keyup you can use the isNaN function to check if it's a number or not. This will validate decimals though as well, so you'll want to check that there's no decimal.

if (!isNaN(someValue)){
   //your code to add to href
}

score 0 · Answer 2 · 2013-10-31T14:28:42.400

0

All i got from your question is that you want to validate <a> tag from jquery

$("a[href*='month']").click(function(event){
    var value=$(this).attr("href");
    value=value.split("=");
    var temp=value[1];
    alert(temp);
    if(isNaN(temp)){
        event.preventDefault();
        alert("not a number");
    }
    else if(temp<1||temp>12){
        event.preventDefault();
        alert("invalid month");
    }
});

EDIT:
thanks to jack's comment, here is the possible solution of question asked

$("#month").keyup(function(){
    //Add your copying code here, and edit $atag accordingly 
    var $atag=$("a[href*='month']");
    var value=$(this).val();
    if(isNaN(value)){
        $atag.attr("disabled","disabled");
    }
    else if(value<1||value>12){
        $atag.attr("disabled","disabled");
    }
    else $atag.removeAttr("disabled");
});

edited Oct 31 '13 at 14:28

answered Oct 31 '13 at 13:58

I'm pretty sure he wants to validate the input is a number before he appends it to the href. – Jack Oct 31 '13 at 14:07
1

as he stated in question that should not be valid, so i done in that way – Oct 31 '13 at 14:09
`I use jQuery to copy the information with keyup, in my case to a href.` He's taking the value of the input on keyup then assigning it to the href. He can do all evaluation in the keyup. – Jack Oct 31 '13 at 14:11
1

@Jack i edited my solution, i hope this is what u were referring – Oct 31 '13 at 14:27
An anchor has no disabled attribute. Why do you write if else if else for only two different actions. A simple if else would do the same. Where are you using the HTML5 API? – alexander farkas Oct 31 '13 at 16:19

alexander farkas · Answer 3 · 2013-10-31T16:16:37.110

First of all you can use the HTML5 form validation API. But this requires, that the browser supports this API or you are using a polyfill. Currently FF4+, IE10+, Chrome and Safari do support the API. But FF does not fully support the number type.

If you want to use the HTML5-API:

use the input event instead of the keyup event. This is much better event for your task (think, paste, cut and so on).
Simply use the :valid Selector to test, wether input is valid (if not polyfilled, will throw an error in IE9-)

I have put together a simple solution for you, which is using webshims to polyfill the API for you.

But to be honest, I question your approach. You can simply use a form with a button, proper action attribute and a month named type="number" instead of a link + JS for your solution and do not need to add JS at all. Code could look like this and you get the HTML form validation for free:

<form action="#">
    <div>
        <button class="text" type="submit">to month: </button> 
        <input type="number" name="month" placeholder="Month" min="1" max="12" required value="1" size="2" />
    </div>
</form>

My example also shows how to style a button as a link.

jQuery HTML5 input valid live

3 Answers3