Avoid 0 value in form - html

Question

I have a form, one of the field is so far a text value. I want to avoid the value 0 but still allow to type fraction such as 1/3. my fraction are then recalculated and rounded to the 4th digit.
I therefore can not use <input type="number" min="0.0001">
How can I do that?

Answer 1

Why not just have a JavaScript validation for the form? It allows you to be much more precise with what kind of data you accept.
Example JavaScript:
function validateNonzeroForm() {
var a = document.forms["myForm"]["nonzero_number"].value;
if (a == "0") {
alert("Nonzero field cannot be zero. Please enter a number.");
return false;
}
}
HTML:
<form name="demoForm" action="" onsubmit="return validateNonzeroForm()" method="post">
Please write numbers: <input type="number" name="nonzero_number">
<input type="submit" value="Submit">
</form>

Answer 2

Cross-Browser 'Pattern' Support
Validates all <form> <input> elements against your desired .value requirement using pattern attribute.
JavaScript:
function validateInputs(form){
var all_valid = true
for(var i=0; i<form.elements.length; i++ ){
var input = form.elements[i]
// Breakpoints:
// If we are not looking at an <input> element
// If the element does not have a pattern attribute
if( input.tagName.toLowerCase().indexOf('input') == -1 ) continue;
if( !input.getAttribute('pattern') ) continue;
// input Regex Pattern to test
var pattern = new RegExp(input.getAttribute('pattern'),'g');
if( pattern.test(input.value) ){
// Passed Test - Do Something
input.style.background = 'transparent'
}else{
// Failed Test - Do Something
input.style.background = '#FDD'
all_valid = false
}//endifelse
}//endfor
if(all_valid)
return true;
alert('That is not a valid entry')
return false
}//endfunction
HTML:
<form onsubmit="return validateInputs(this);">
<input type="text" pattern="(^[^0]$)" />
<button>Go</button>
</form>
To satisfy your question, a pattern of (^[^0]$) does not allow any
blank or zero value.
If you do not wish to validate an <input>, do not define the pattern attribute for it.

Answer 3

Avoid 0 value in <input>, Allow typing of fractions such as 1/3, Recalculate and round value to 4th decimal.
JavaScript:
function calculateFraction(form){
function returnError(){
alert("You must enter a 'non-zero' numeric value")
input.style.background = '#FDD'
return false
}
// Define input element to check
var input = form["fraction"] // Input MUST be type="text"
// Breakpoint - if value can't be evaluated.
if( !/^[0-9\/*\.\+-]*$/.test(input.value) )
return returnError();
// Evaluate statement. i.e. compute fractions, etc.
var value = eval(input.value)
// Test for '0'
if( Number(value)==0 ){
// Failed Test - Do Something
returnError()
return false
}
// Round to fourth decimal, define as the new input value
input.value = Math.round(value*10000)/10000
// Submit Form
return true
}//endfunction
HTML
<form onsubmit="return calculateFraction(this);">
<input type="text" name="fraction" />
<button>Go</button>
</form>
Caveats
The <input> MUST be of type="text"