Vergleichen zweier Textfelder für Integer-Wert in jQuery mit Nummer Validierung

Question

Ich habe zwei Textfelder. Eins ist von Datum und ein anderes ist Bis Datum. Ich validiere beide Textfelder mit der Nummer. aber meine Anforderung ist, wenn ich von Datum füllen 700 als bisher akzeptieren mehr als 700.
Hier ist mein HTML

$("#from").keypress(function(e) { 
 
    //if the letter is not digit then display error and don't type anything 
 
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
 
    //display error message 
 
    $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");; 
 
    return false; 
 
    } 
 
}); 
 
$("#to").keypress(function(e) { 
 
    //if the letter is not digit then display error and don't type anything 
 
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
 
    //display error message 
 
    $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");; 
 
    return false; 
 
    } 
 
}); 
 
$("#searchsubmit").click(function() { 
 
    var to = $("#to").val(); 
 
    var from = $("#from").val(); 
 
    if (to == "" && from == "") { 
 
    //alert('Please Provide Era Value For From And To'); 
 
    $("#response").html("Please Provide Era Value For From And To").show().fadeOut(3000).css("color", "red"); 
 
    //window.location(); 
 
    } else { 
 
    var info = 'to=' + to + '&from=' + from; { 
 
     if (info) { 
 
     //alert(info); 
 
     window.location.href = "timeline.php?from=" + from + '&to=' + to;; 
 
     } else { 
 
     alert('No Data Found'); 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<span class="info"> From </span> 
 
<input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required /> 
 
</span> 
 
<span class="eraform"> 
 
    <span id="errmsg"></span> 
 
<span class="info"> To </span> 
 
<input class="erainput" name="to" id="to" type="text" placeholder="2000" required /> 
 
</span> 
 
<span class="eraform"> 
 
    <button type="submit" id="searchsubmit" name="submit" class="eraBtn"> Search <i class="fa fa-search"></i> </button> 
 
</span>

Dank

Answer 1

Verwenden Sie den folgenden Code und ändern Sie mit Ihren Anforderungen .

$("#searchsubmit").click(function (e) { 
 
    var from = parseInt($("#from").val()); 
 
    var to = parseInt($("#to").val()); 
 
    if(to < from) 
 
    { 
 
    alert("TO value must be greater than FROM"); 
 
    } 
 
    else 
 
    { 
 
    //submit form 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="info"> From </span> 
 
<input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required /> 
 
</span> 
 
<span class="eraform"> 
 
<span id="errmsg"></span> 
 
<span class="info"> To </span> 
 
<input class="erainput" name="to" id="to" type="text" placeholder="2000" required /> 
 
</span> 
 
<span class="eraform"> 
 
<button type="submit" id="searchsubmit" name="submit" class="eraBtn"> Search <i class="fa fa-search"></i> </button> 
 
</span>

Answer 2

1. DRY (nicht selbst wiederholen)
2. Verwendung ParseInt
3. Verwendung Ajax
4. Test isNaN
5. Test Einfügen (auf Eingang)
6. benutze einen Knopf - siehe Änderungen t o Ihre HTML, habe ich auch eine Antwort div
7. NIE name="submit" alles in einer Form, nennen es verbirgt senden Sie das Formular Ereignis
8. info immer wahr sein - Sie haben keine leere Zeichenfolge

   $("#from, #to").on("keypress input", function(e) { 
    
       //if the letter is not digit then display error and don't type anything 
    
       if (isNaN($(this).val()) || (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))) { 
    
       //display error message 
    
       $(this).val(""); 
    
       $("#errmsg").html("Digits Only").show().fadeOut("slow").css("color", "red");; 
    
       return false; 
    
       } 
    
   }); 
    
   $("#searchsubmit").click(function() { 
    
       var to = parseInt($("#to").val(), 10); 
    
       var from = parseInt($("#from").val(), 10); 
    
       if (to == "" || from == "" || 
    
        isNaN(to) || isNaN(from)|| // not likely possible now 
    
        to < from || 
    
        from < 700 || 
    
        to > 2000 
    
   ) { 
    
       $("#response").html("Please provide valid Era values for From and To").show().fadeOut(3000).css("color", "red"); 
    
       } else { 
    
       var info = 'to=' + to + '&from=' + from; 
    
       console.log(info); 
    
       $("#response").load("timeline.php?from=" + from + '&to=' + to); 
    
       } 
    
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
    
   <span class="info"> From </span> 
    
   <input class="erainput" name="from" id="from" type="text" placeholder="UP To 700" required /> 
    
   </span> 
    
   <span class="eraform"> 
    
       <span id="errmsg"></span> 
    
   <span class="info"> To </span> 
    
   <input class="erainput" name="to" id="to" type="text" placeholder="2000" required /> 
    
   </span> 
    
   <span class="eraform"> 
    
       <button type="button" id="searchsubmit" class="eraBtn"> Search <i class="fa fa-search"></i> </button> 
    
   </span> 
    
   <div id="response"></div>