Javascript Validate Input fields + Select Field

I am using a very easy (but functional for my needs) Javascript script to validate input fields.

Here my main code:

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

Here are my fields

    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">

and here my Submit button:

    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>

What this does is to leave the submit button disabled until all fields have some value entered and works absolutely fine, however I also have a new and additional select option being:

    <select name="Countries">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

I've tried to apply the following changes:

<script language = "javascript">
function manage(txt) {
    var bt = document.getElementById('send');
    if (txt.value && txt2.value && txt3.value && txt4.value != '') {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}       
</script>

    <select name="Countries" id="txt4" onkeyup="manage(this)">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
            ......
    </select>

However it does not seem to work. Some expert advise would be greatly appreciated. Thank you very much.

The proper form is

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='')

You don't want to set the onkyeup event, but onchange. More universal event is oninput.

You should also check the required form elements tag attribute, which can provide you similar functionality without javascript. See here.

JavaScript Form Validation. HTML form validation can be done by JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted:

First of all, listening keyup event on your select will work only in case if select was changed by the keyboard. In case if it was changed by mouse, your event won't be fired. Better to listen onchange

On another hand, you should check the emptiness of all text fields, as you do for txt4.value!='':

if (txt.value!='' && txt2.value!='' && txt3.value!='' && txt4.value!='') {
   ...
}

JavaScript: Test input fields for Valid Data. This JavaScript validates character input the user can enter into an input or textarea. This is useful in aiding the user enter the correct information such as a number or username. Check for Numbers: Check for upto 2 Decimal: Check for Uppercase String:

Now it will work.

function manage(txt) {
    var bt = document.getElementById('send');
    if ( txt.value != '' && txt2.value != '' && txt3.value != '' && txt4.value != '' ) {
        bt.disabled = false;
    }
    else {
        bt.disabled = true;
    }
}  
 <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onkeyup="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onkeyup="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onkeyup="manage(this)">
 <select name="Countries" id="txt4" onchange="manage(this)">
                <option value="">Select Country</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Åland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
              
        </select>

      <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>

      

function hasValue( val ) { // Return true if text input is valid/ not-empty return val.replace(/\s+/, '').length; // boolean } For multiple elements you can pass inside your input elements loop their value into that function argument. If a user inserted one or more spaces, thanks to the regex s+ the function will return false.

I have done this type of functionality before. So I'm sharing my code here. HTML Code

<form method="Post" class="form">
    <input type="text" name="FNAME" id="txt" class="input" size="20" placeholder="First Name *" onblur="manage(this)">
    <input type="text" name="LNAME" id="txt2" class="input" size="20" placeholder="Last Name *" onblur="manage(this)">
    <input type="text" name="EMAIL" id="txt3" class="input" size="20" placeholder="Email *" onblur="manage(this)">
    <select name="Countries" id="txt4"  onchange="manage(this)" class="input">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Åland Islands">Åland Islands</option>
            <option value="Albania">Albania</option>
    </select>
    <input type="submit" name="submit" id="send" class="button button-primary" value="Subscribe" disabled>
</form>

Javascript Code:

<script>
function manage($e){
    var input = document.getElementsByClassName("input");  
    var status=false;
    for(var i=0;i<input.length;i++){
        if(input[i].value.trim()!='' && input[i].value.trim()!=null && input[i].value.trim()!=undefined){
            status = true;
        } else {
            status = false;
            break;
        }
    }
    console.log(status);
    if(status===true){
        var email = document.getElementById("txt3").value;  
        if(!(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.trim()))){console.log('1');
            document.getElementById('send').disabled = true;
        } else {console.log('2');
            document.getElementById('send').disabled = false;
        }       
    } else {
        document.getElementById('send').disabled = true;
    }
}

</script>

There are many ways to resolve this type of functionality but for this case, I have used the above code to achieve the goal. If you have any queries, please let me know. Thanks.

'onsubmit="return validate()"' needs to be changed. validate is not the name of the function. It should be 'onsubmit="return validateForm()"' – tazboy Nov 20 '14 at 14:24

JavaScript validation is coded using JavaScript. This validation is completely customizable, but you need to create it all (or use a library). Using built-in form validation. One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. This is done by using validation attributes on form elements. We've seen many of these earlier in the course, but to recap:

In your answer you have provide an alert message but in my case I need to show the required validation for each and every field exactly below the field can you provide me some input – Meena Jan 7 at 8:06

Using the email type, we can check the validity of the form field with a javascript function called… checkValidity (). This function returns a true|false value. checkValidity () will look at the input type as well as if the required attribute was set and any pattern="" tag. <input type="email" id="emailField" required>

Comments