Not able to verify if input field is empty or not after clicking the sumbit button
I am basically checking to see if the input field(fullName) is empty or not. If it is empty, then I want to disable the submit button, and forcing the user to add text in the FullName field.
To achieve this scenario, I did the following(code below), but when testing, I am still able to click the submit button, even if the FullName field is empty. I am not sure, what I am doing wrong with the JavaScript code.
I am doing all of this inside an .htm file.
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
</fieldset>Answer
Your JS is ok. There are some changes –
First, wrap the form content in a form with a name attribute of form.
Next, fire the checkform function on clicking the submit button.
Check the snippet below-
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<form name="form">
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name
<span class="required">*</span>
</label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="submit" class="btn btn-namebtn" onclick="checkform(document.form)">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>