Christian Burgos
Christian Burgos

Reputation: 1591

string validation in jquery/javascript as MM:ss not HH:MM:ss

i want to validate a certain string that a jquery function receives.

here's what i have made so far

var duration=$('#duration').val();

  if(//string validation?) {
      $('.alert-box').html('Please use the correct format');
   }

the string format the i want is mm:ss (its a duration m for minutes and s for seconds)so if a user just enter m:ss or mm:s or if the user entered a single digit minute or second, it should be preceded by a zero like if its 9:00 then it should be 09:00.

this is the latest code i've tried and its still not validating

 $('#btnAddTestCat').click(function () {
        var code = "addTestCat";
        var test_cat=$('#test_cat').val();
        var duration=$('#duration').val();
        var sub_cat=$('#sub_cat').val();
        var e = $('.alert-box');
        e.slideUp(300);

        if(!(/[0-5][0-9]:[0-5][0-9]/g).test(duration)){
          e.html('Please use the correct format!');
          return false;
        }
        var dataString = 'test_cat=' + test_cat + '&duration=' + duration + '&sub_cat=' + sub_cat + '&code=' + code;
        $.ajax({
            type: "POST",
            url: "controller/category_controller.php",
            data: dataString,
            cache: false,
            success: function(result){
                var result = $.trim(result);
                if(result=='success'){                      
                    e.removeClass("alert");
                    e.addClass("info");
                    e.html('Category added!');
                    e.slideDown(300);
                    e.delay(500).slideUp(300);  

                }else{                  
                    e.removeClass("info");
                    e.addClass("alert");
                    e.html(result);
                    e.slideDown(300);
                    e.delay(500).slideUp(300);  
                }
            }   
        });
    });

Upvotes: 1

Views: 1871

Answers (2)

Silas
Silas

Reputation: 221

<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Test</title>
<script src="/script/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#Submit').click(function(){
        var val = $('#Input').val();
        var validinput = true;
        if(val.length!=5){
         validinput = false;
        }
        for(var i=1; i<=val.length; i++){
            if(i!=3 && !(isNumeric(val.substring(i-1,i)))){
                validinput = false;
            }else if(i==3 && val.substring(i-1,i)!=':'){
                validinput = false;
            }
        }
        if (!validinput){
            alert(val+" does not match the format mm:ss. Please correct this issue before submitting the form.");
            return false;
        }else{
            alert("It's correct!!");
        }
    });
    function isNumeric(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }
});
</script>
</head>
<body>
    <input type="text" id="Input" value="" /> Format = mm:ss
    <br />
    <button type="button" id="Submit">Submit</button>
</body>
</html>

Upvotes: 1

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93203

Use this Regex : for mm:ss

if(!(/^(?:[0-5][0-9]):[0-5][0-9]$/).test(duration)){
      $('.alert-box').html('Please use the correct format');
}

DEMO

Upvotes: 5

Related Questions