price range validation using javascript or jquery

Question

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>    
<form method="post" action="form.php">

   Price : From
    <input type="text" id="price-from"> 

   To: 
    <input type="text" id="price-to">

    <input type="submit">

</form>    
</body>
</html>

I want to validate price range ..Price From must be less than Price To.

Don't forget to validate on server-side again! Or else, it will be [a security risk](http://stackoverflow.com/questions/13476959/so-is-it-safe-to-validate-form-on-client-side-only) — T3 H40, Feb 01 '16 at 06:45
Please do not use the [tag:jquery-validate] tag when the question contains nothing about this plugin. The same goes for the [tag:php] and [tag:html] tags. Tag-spamming is not allowed on SO. Edited. Thanks. — Sparky, Feb 01 '16 at 17:10

score 1 · Accepted Answer · answered Feb 01 '16 at 06:08

1

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<form method="post" action="form.php" onsubmit="return validate()">
Price : From
<input type="text" id="price-from"> 

To: 
<input type="text" id="price-to">
<input type="submit">
</form>

</body>
<script>
    var validate=function(){
            var from=document.getElementById("price-from").value;
            var to=document.getElementById("price-to").value;
            if(from<to)
                return true;
            alert("from>=to");
            return false;
        }
</script>
</html>

answered Feb 01 '16 at 06:08

Nithin Mohan

182
4
13

how to change alert message ?? – user12342 Feb 01 '16 at 06:40
change the text in alert function call. – Nithin Mohan Feb 01 '16 at 09:07
.... if(from – Nithin Mohan Feb 01 '16 at 09:07
I want to include size from and to validation .. how to validate along with price .. – user12342 Feb 01 '16 at 10:41

score 0 · Answer 2 · answered Feb 01 '16 at 06:01

call this method on submit

function validatePrices()
{
  var priceFrom = parseFloat( $( "#price-from" ).val() );
  var priceTo = parseFloat( $( "#price-to" ).val() );
  if ( !isNaN( priceFrom )  && !isNaN( priceTo)  )
  {
    if ( priceFrom >= priceTo )//if greater than or equal to then show error alert
    {
       alert( "price from should be less than price to" );
       return false;
    }
  }
  else
  {
       alert( "price from and price to should be valid numbers " );
       return false;
  }
}

score 0 · Answer 3 · answered Feb 01 '16 at 06:04

You may want to give an id to your submit button.

$(functoin() {
      var fromPrice = $("#price-from").val();
      var toPrice = $("#price-to").val();

      if (fromPrice != "" && toPrice != "") {
        if (parseFloat(toPrice) > parseFloat(fromPrice) {
            $("#frmPrice").submit()
          }


      });

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <form method="post" action="form.php" id='frmPrice'>
    Price : From
    <input type="text" id="price-from">To:
    <input type="text" id="price-to">
    <input type="submit" id="btnSubmit">
  </form>

</body>

</html>

price range validation using javascript or jquery

3 Answers3