Javascript text validation is malfunctioning as the alert message fails to appear

Question

Javascript text validation is malfunctioning as the alert message fails to appear

Looking for a simple form validation script:

<script language=”javascript”>
    function checkForm(register) {      
if (""==document.forms.register.FNAME.value){
    alert("Please fill out this field!");
    document.forms.register.FNAME.focus();
    return false;
}    
if (""==document.forms.register.LNAME.value){
    alert("Please fill out this field!");
    document.forms.register.LNAME.focus();
    return false;
}
if (EMAIL.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
    alert(“Invalid email”);
    return false;
}       
if('0'==document.forms.register.GENDER.value){
    alert("Please select an option!");
    document.forms.register.GENDER.focus();
    return false;
}
if (""==document.forms.register.ADDRESS.value){
    alert("Please fill out this field!");
    document.forms.register.ADDRESS.focus();
    return false;
}
if (""==document.forms.register.CONTACTNO.value){
    alert("Please fill out this field!");
    document.forms.register.CONTACTNO.focus();
    return false;
}
}
</script>

Using the onSubmit handler to call the function, but nothing is happening when submit is clicked. It's skipping javascript and going straight to the PHP script. Any ideas why?

Form HTML:

 <form name="register" action="register.php" method="POST" onsubmit="return checkForm(register);">
<table width="100%" border="0">
<tr>
  <td width="46%" height="24" align="right">First Name:</td>
  <td width="54%"><input name="FNAME" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Last Name:</td>
  <td><input name="LNAME" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Email Address</td>
  <td><input name="EMAIL" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Gender:</td>
  <td><select name="GENDER">
      <option value="" selected="selected">- Select One -</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option></select></td>
</tr>
<tr>
  <td height="24" align="right">Address:</td>
  <td><input name="ADDRESS" type="text" size"20" /></td>
</tr>
    <tr>
  <td height="24" align="right">Contact No.:</td>
  <td><input name="CONTACTNO" type="text" size"20" /></td>
</tr>
<tr>
  <td height="24" align="right">Password</td>
  <td><input name="PASSWORD" type="password" size"20" /></td>
</tr>
 <tr>
  <td height="24" align="right">Re-type Password</td>
  <td><input name="PASSWORD2" type="password" size"20" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input name="submit" type="submit" value="Register" /></td>
</tr>
</table>

</form>

Not seeing the alert message? What could be causing this issue?

javascript forms validation

Answer 1

Answer №1

After reviewing your code, I made some improvements to enhance its logic and maintainability.

Here is the updated HTML snippet:

<form name="register" action="register.php" method="POST" onsubmit="return validate_form();">

Take a look at the updated JavaScript function:

function validate_form() {
    var form = document.forms.register;
    function focus_and_false(element) {
        element.focus();
        return false;
    }
    if (form.FNAME.value === "") {
        alert("Please fill out this field!");
        return focus_and_false(form.FNAME); 
    }
    return true;
}

Click here for a live example

Answer 2

After reviewing your code, I made some improvements to enhance its logic and maintainability.

Here is the updated HTML snippet:

<form name="register" action="register.php" method="POST" onsubmit="return validate_form();">

Take a look at the updated JavaScript function:

function validate_form() {
    var form = document.forms.register;
    function focus_and_false(element) {
        element.focus();
        return false;
    }
    if (form.FNAME.value === "") {
        alert("Please fill out this field!");
        return focus_and_false(form.FNAME); 
    }
    return true;
}

Click here for a live example

Answer 3

Answer №2

Your javascript code has a major syntax error that needs to be fixed...

function return validate_form(register)

should be

function validate_form(register)

Try starting with this fix :)

Also, make sure to add an alert right after the function declaration to confirm it is being executed correctly.

Another mistake in your code:

<script language=”javascript”>

Should be

<script type="text/javascript">

Lastly, I recommend changing the function name to

function validateForm(register)

Let me know if this resolves the issue for you :)

Answer 4

Your javascript code has a major syntax error that needs to be fixed...

function return validate_form(register)

should be

function validate_form(register)

Try starting with this fix :)

Also, make sure to add an alert right after the function declaration to confirm it is being executed correctly.

Another mistake in your code:

<script language=”javascript”>

Should be

<script type="text/javascript">

Lastly, I recommend changing the function name to

function validateForm(register)

Let me know if this resolves the issue for you :)

Answer 5

Answer №3

Be mindful of using curly quotes in your code

alert(“Wrong email”);  <---bad quotes

It's important not to just use a name

onsubmit="return validate_form(register);"

Instead, pass in "this" which refers to the current scope, in this case, the form element.

onsubmit="return validate_form(this);"

Have you checked the value of EMAIL?

EMAIL.value

Avoid solely referencing element names in your code.

Answer 6

Be mindful of using curly quotes in your code

alert(“Wrong email”);  <---bad quotes

It's important not to just use a name

onsubmit="return validate_form(register);"

Instead, pass in "this" which refers to the current scope, in this case, the form element.

onsubmit="return validate_form(this);"

Have you checked the value of EMAIL?

EMAIL.value

Avoid solely referencing element names in your code.

Javascript text validation is malfunctioning as the alert message fails to appear

Answer №1

Answer №2

Answer №3

Similar questions

Utilize the split functionality only when the character you want to split by is found in

Adding HTML elements to a button using an array: a step-by-step guide

Is there a way to integrate a calendar feature within an Angular 2 application?

Using Ajax to submit two forms by clicking a submit button

What is the most efficient way to transfer form data from one JSP page to another?

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

The @Input() function is failing to display or fetch the latest value that was passed

Set a timeout for a single asynchronous request

Having trouble aligning a div in the middle of a slick-slider item using flex styling

How can I update the state with the value of a grouped TextField in React?

Developing with node and express: optimizing your workflow

CORS request results in unsuccessful cookie setting in browsers except for Firefox where Set-Cookie header is detected; notably, Chrome does not show the header

I am unable to utilize the backspace function within a text box generated by JavaScript

Disabling related videos in React Native: A guide to preventing suggested content from appearing at the end of YouTube videos

Parcel-Bundler is unable to resolve critical security issues

Lock the initial column in an HTML table

Navigating the complexities of extracting and storing a data type from a collection of objects

JavaScript error: Function is not defined when using Paper.js

The URL in an AJAX request includes a repeating fragment due to a variable being passed within it

Filtering elements using two dropdown lists