JSFiddle - React, Tailwind, and code Playground

by Rajeesh Menoth

HTML

<form name="myform" id="myForm" method="POST">
  <h2>Price Range Validation</h2>

  <select id="ddlminprice">
    <option value="1">Min</option>
    <option value="2">$10,000</option>
    <option value="3">$20,000</option>
    <option value="3">$30,000</option>
    <option value="3">$40,000</option>
    <option value="3">$50,000</option>
    <option value="5">$20,000,00</option>
  </select>
  <select id="ddlmaxprice">
    <option value="1">Max</option>
    <option value="2">$10,000</option>
    <option value="3">$20,000</option>
    <option value="3">$30,000</option>
    <option value="3">$40,000</option>
    <option value="3">$50,000</option>
    <option value="5">$20,000,00</option>
  </select>
  <input type="button" id="button" value="Validate" />
  <br/>
  <br/> <span id="lblPriceDetails" class="Red"></span>
</form>

CSS

.Red {
  color: red
}

JavaScript

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


  var ddlminprice = $('#ddlminprice option:selected').text().replace("Min", -1);
  var ddlmaxprice = $('#ddlmaxprice option:selected').text().replace("Max", -1);
  ddlminprice = parseInt(ddlminprice.replace(/[,$]/g, ""));
  ddlmaxprice = parseInt(ddlmaxprice.replace(/[,$]/g, ""));

  if (ddlminprice == -1 && ddlmaxprice != -1) {
    lblPriceDetails.innerHTML = "Please Select Min Price";
    return false;
  } else if (ddlminprice != -1 && ddlmaxprice == -1) {
    lblPriceDetails.innerHTML = "Select Max Price";
    return false;
  } else if (ddlmaxprice == -1 && ddlminprice == -1) {
    lblPriceDetails.innerHTML = "";
    return true;
  } else if (ddlmaxprice != -1 && ddlminprice != -1) {

    if (ddlminprice < ddlmaxprice) {

      lblPriceDetails.innerHTML = "";
      return true;
    } else if (ddlminprice == ddlmaxprice) {
      lblPriceDetails.innerHTML = "Min Price and Max Price should not be equal";
      return false;
    } else {
      lblPriceDetails.innerHTML = "Min Price should be less than Max Price";
      return false;
    }

  } else {
    lblPriceDetails.innerHTML = "";
    return true;
  }
});