CODEWITHSUNDEEP
javascripthtml
thedafferg
thedafferg

Reputation: 99

Validation methods not working correctly for empty fields and number input

I'm new to Javascript, and I've been provided with some sample code already which I have been asked to make changes to according to the requirements. I have a function that checks for empty strings and another function that checks if the empty string condition is met, to check further if the input is in numbers (for phone numbers).

The problem I'm facing is that the isNotEmpty function does not seem to work for my fields, and for the isNumber function I always get the alert prompt even if i change the input back to number, and no matter what I do the isNumber alert will always come up when I click submit.

I also have an object User, which I'm trying to use to assign values that I enter to this user object, upon clicking the button of the form "user" right after my "submit" button, but I'm not sure how to get that going.

Keep in mind I'm still new and am not very familiar with alternative codes and methods, so for my understanding I want to know why these functions are not working as desired.

My JavaScript:

<script language="javascript">


function User(name,number,pastime){
    this.name=name
    this.number=number
    this.pastime=pastime
}

    var user = new User()

function isNotEmpty(field){
    var inputStr = field.value
    if (inputStr = "" || inputStr == null){

        alert("An entry for this field is required.")
        field.focus()
        field.select()
        return false
    }
    return true
}

function isNumber(field){

    if (isNotEmpty(field)){
        var inputStr = field.value
        for(var i = 0; i<inputStr.length; i++){
            var oneChar=inputStr.substring(i,i+1)
            if (oneChar < "0" || oneChar > "9" || oneChar != "+"){
                alert("Only numbers and area codes are allowed in this field.")
                field.focus()
                field.select()
                return false
            }
        }
        return true
    }return false
}

function isOption(form){

    var type = form.getElementByID("pastimetype")
    var selectedValue = type.options[type.selectedIndex].value;
        if(selectedValue == "selectpastime"){
            alert("Please select a pastime.")
            return false
        }
    return true
}   

function validate(form){
    if(isNotEmpty(form.name) && isNumber(form.number) && isOption(form.pastime)){
        return true
    }
    return false

}

function createUser(form) {
        form.name.value=user.name
        form.name.value=user.number
        form.pastime.value=user.pasttime
}

</script>
</head>

My HTML:

<body>

<form method="GET" action="http://www.it.murdoch.edu.au/cgi-bin/reply1.pl"
    onSubmit="return validate(this)">

    <p> Welcome! 
    Please enter the following details:</p>

    <p><label for="name"> Name: </label><br>
    <input name="name" id="name" type="text" size="10" onChange="isNotEmpty(this)"></p>

    <p><label for="number"> Number: </label><br> 
    <input name="number" type="text" id="number" onChange="isNumber(this)"></p>  

    <p><label for ="pastime"> Favourite pastime: </label>
    <select name="pastime" select id="pastimetype">
    <option value="selectpastime">---Please choose an option---</option>
    <option value="surfingtheweb">Surfing the Web</option>
    <option value="playingsport">Playing Sport</option>
    <option value="listeingtomusic">Listening to Music</option>
    <option value="watchingtv">Watching TV</option>
    <option value="playinggames">Playing Games</option>
    <option value="communityservice">Community Service</option>
    <option value="daydreaming">Daydreaming</option>
    <option value="reading">Reading</option>
    <option value="meditation">Meditation</option>
    </select></p>

    <p>
        <input type="submit">
        <input type="button" value="user" onClick="createUser(this.form)">
    </p>

</form>

</body>

</html>

Upvotes: 1

Views: 220

Answers (2)

naexus
naexus

Reputation: 11

try this,

for(var i = 0; i<inputStr.length; i++){
    var oneChar=inputStr.substring(i,1)
    if (isNan(parseInt(oneChar)) && oneChar != "+") {
        alert("Only numbers and area codes are allowed in this field.")
        field.focus()
        field.select()
        return false
    }
}

Upvotes: 0

naexus
naexus

Reputation: 11

in isNumber function: 

for(var i = 0; i<inputStr.length; i++){
    var oneChar=inputStr.substring(i,i+1)
    if (oneChar < "0" || oneChar > "9" || oneChar != "+"){
        alert("Only numbers and area codes are allowed in this field.")
        field.focus()
        field.select()
        return false
    }
}

replace 

var oneChar=inputStr.substring(i,i+1)

by 

var oneChar=inputStr.substring(i,1)

Because the signature function of substring is : substring(start_index, length_of_substring).

Upvotes: 1

Related Questions