HTML Form with Javascript Validation & Alert - Stack Overflow

admin管理员组

文章数量:1334397

I'm working on a class project and I am wondering if anyone can provide some input/info as to how I would go about to validating my form fields in a better way. Specifically, I want the alert box to pop up to show all of the missing required fields instead of one box per missing field. Any input would be swell.

<script type="text/Javascript">
function validateForm(assignmentForm)   
{
    valid = true
    if (document.assignmentForm.firstName.value=="")
    {
        alert ("Please fill in your first name.");
        valid = false;
    }
    if (document.assignmentForm.lastName.value=="")
    {
        alert ("Please fill in your last name.");
        valid = false;
    }
    return valid;
}
</script>

I'm new to using javascript within HTML so I apologize in advance for what is most likely a very newbie question. Also, here's a snippet of the HTML portion:

<!--Name Text Fields-->
 <form id="assignmentForm" name="assignmentForm" method="post" onsubmit="return validateForm();">
  <table cellspacing="15">
    <tr>
        <td><a href="#">First Name: </a></td>
        <td><input type="text" id="firstName" name="firstName"></td>
    </tr>
    <tr>
        <td><a href="#">Last Name: </a></td>
        <td><input type="text" id="lastName" name="lastName"></td>
    </tr>

I'm working on a class project and I am wondering if anyone can provide some input/info as to how I would go about to validating my form fields in a better way. Specifically, I want the alert box to pop up to show all of the missing required fields instead of one box per missing field. Any input would be swell.

<script type="text/Javascript">
function validateForm(assignmentForm)   
{
    valid = true
    if (document.assignmentForm.firstName.value=="")
    {
        alert ("Please fill in your first name.");
        valid = false;
    }
    if (document.assignmentForm.lastName.value=="")
    {
        alert ("Please fill in your last name.");
        valid = false;
    }
    return valid;
}
</script>

I'm new to using javascript within HTML so I apologize in advance for what is most likely a very newbie question. Also, here's a snippet of the HTML portion:

<!--Name Text Fields-->
 <form id="assignmentForm" name="assignmentForm" method="post" onsubmit="return validateForm();">
  <table cellspacing="15">
    <tr>
        <td><a href="#">First Name: </a></td>
        <td><input type="text" id="firstName" name="firstName"></td>
    </tr>
    <tr>
        <td><a href="#">Last Name: </a></td>
        <td><input type="text" id="lastName" name="lastName"></td>
    </tr>

• javascript
• html
• forms
• validation
• textfield

Share Improve this question Follow edited Jan 16, 2014 at 1:23 Zeb23 asked Jan 16, 2014 at 1:18 Zeb23Zeb23 5711 gold badge22 silver badges88 bronze badges 1

• Hi, we can help you if you ask a specific question, "better" is a matter of opinion. Also, you should first google information about the alert box, there's plenty of info about that on the web. – anthonygore Commented Jan 16, 2014 at 1:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Have each validation step add its message to an array that you display after all validations are done.

function validateForm(assignmentForm)   
{
    var messages = [];
    if (document.assignmentForm.firstName.value=="")
    {
        messages.push("Please fill in your first name.");
    }
    if (document.assignmentForm.lastName.value=="")
    {
        messages.push("Please fill in your last name.");
    }
    if (messages.length > 0) {
        alert(messages.join('\n'));
        return false;
    } else {
        return true;
    }
}

If you create a string variable in the function before checking each field, you can then append a notification about which needs to be filled in.

After all checks have been pleted, then show the alert using the string you have built.

I would also suggest that you check fields for valid data as well - this may not be necessary for the class work you are doing right now, but it is good practice for any real world code. For example, make sure that name is made of only characters.

本文标签： HTML Form with Javascript Validation amp AlertStack Overflow