Validation methods not working correctly for empty fields and number input

Question

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>

You have a typo in isNotEmpty: inputStr = "" should use == or ===. Also you could use a baked-in function like isNaN to check if your text-input is a number like string. — Gavin
– Gavin, Commented Apr 20, 2020 at 10:10
if (inputStr = "" || inputStr == null) - = -> assignment, == -> comparison — Andreas
– Andreas, Commented Apr 20, 2020 at 10:11

naexus · Accepted Answer · 2020-04-20 10:18:17Z

1

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).

answered Apr 20, 2020 at 10:18

naexus

112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thedafferg Over a year ago

After changing my code to what you said to above, as well as what the people in the previous answer advised me to do for my empty strings, now the empty string alert shows up for the numbers field, and when i fill it with numbers, the number alert from isNumber keeps showing again upon clicking submit. Something is still wrong with my number check

thedafferg Over a year ago

That's why I have defined the field type as "text" instead of "number" so that I can allow for country code prefixes to be assigned as well, using the + symbol. Would there be some other way to allow for it then?

thedafferg Over a year ago

It turns out, when I remove the checking for + condition, the alert still persists and I cant enter numbers or characters and submit without it showing up again.

naexus · Accepted Answer · 2020-04-20 10:39:18Z

0

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
    }
}

answered Apr 20, 2020 at 10:39

naexus

112 bronze badges

Collectives™ on Stack Overflow

Validation methods not working correctly for empty fields and number input

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related