JavaScript. Please advise on better code reuse and/or structure

Question

As the title suggests, A better coding structure or implementation for my JavaScript below. This checks a ID element values from a form before submitting to a database.

I'm interested to know if I could have reduced the code size/could have implemented reuse of code which will give me some tips for the future!

Thanks.

---

function validateRunnerID()
{
    var runnerID = document.getElementById('RunnerID').value;
    if (isNaN(runnerID) || runnerID < 1 || runnerID > 9999)
    {
        return "RunnerID: Enter a Integer Value between 1-9999 \n\n";
    }else{
        return "";
    }
}

function validateEventID()
{
    var eventID = document.getElementById('EventID').value;
    if (isNaN(eventID) || eventID < 1 || eventID > 9999)
    {
        return "EventID: Enter a Integer Value between 1-9999 \n\n";
    }else{
        return "";
    }
}

function validateDate()
{
    var checkDate= /^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/;
    var date= document.getElementById('Date');
    var tof= date.value.match(checkDate);

    return tof? "" : "Date: Enter a Valid Date with parameters: YYYY-MM-DD \n\n";
}

function validateFinishTime()
{
    var finishTime = document.getElementById("FinishTime").value;
    if (finishTime.match(/^[0-9]{2}:[0-9]{2}:[0-9]{2}$/)) 
    {
        return ""
    }else{
        return "Finish Time: Enter a valid Time with parameters: HH:MM:SS \n\n";
    }
}
//  
//
function validatePosition()
{
    var position = document.getElementById('Position').value;
    if (position.length == 0)
    {
        document.getElementById('Position').value = -1;
        return "";
    }else{
        return "";
    }
}
function validateCategoryID()
{
    var categoryID = document.getElementById('CategoryID').value;
    if (categoryID.length == 0)
    {
        document.getElementById('CategoryID').value = -1;
        return "";
    }else{
        return "";
    }
}
function validateAgeGrade()
{
    var ageGrade = document.getElementById('AgeGrade').value;
    if (ageGrade.length == 0)
    {
        document.getElementById('AgeGrade').value = -1;
        return "";
    }else{
        return "";
      }
}
function validatePB()
{
    var pBest = document.getElementById('PB').value;
    if (pBest.length == 0)
    {
        document.getElementById('PB').value = 0;
        return "";
    }else{
        return "";
    }
}
//  
//
function validateForm() 
{
    var result = validateRunnerID() + validateEventID() + validateDate() + validateFinishTime() + validatePosition() + validateCategoryID() + validateAgeGrade() + validatePB();

    if ( result == "" )
    { 
        alert("Data Accepted and Submitted \n\n");
        return true; 
    }else{
        alert("Please Fix Errors Listed: \n\n" + result);
        return false;
    }
}

Answer 1

One thing you can do is to accept an elementId as input to your validation functions. This allows to reuse the same logic for different fields.

For example:

function validate4DigitInt(elementId)
{
    var value = document.getElementById(elementId).value;
    if (isNaN(value) || value < 1 || value > 9999)
    {
        return elementId + ": Enter a Integer Value between 1-9999 \n\n";
    }else{
        return "";
    }
}

Now you can validate both RunnerId and EventId using the same function:

var result="";
result+=validate4DigitInt("RunnerId");
result+=validate4DigitInt("EventId");