Very simple Javascript form validation???

This site is best viewed in a modern browser with JavaScript enabled.

Very simple Javascript form validation???

jillmur

I have a very simple form that I want to verify if the fields are filled out. On submit, I have a vbscript that sends the form contents via email to a mail box (thus the asp extension) but the following javascript validation does nothing. Any ideas?

function formValidator(theForm)
{
if (theForm.addrStreet.value == "")
{
alert("You must enter an address.");
theForm.addrStreet.focus();
return (false);
}

The form call is as follows:

phpnovice

function formValidator(theForm)
{
    if (/^\s*$/.test(theForm.addrStreet.value))
    {
        alert("You must enter an address.");
        theForm.addrStreet.focus();
        return false;
    }
    return true;
}

jillmur

PHPNovice,

That validates the form field but now the email script doesn't execute. I placed it like this:

function formValidator(theForm)
{
if (/^{\s*$/.test(theForm.addrStreet.value))}
{
alert("You must enter an address.");
theForm.addrStreet.focus();
return false;
}
<%
Vbscript to send email here
%>

return true;

}
-->
</script>

Help??

phpnovice

Server-side code executes only on the server and, therefore, cannot execute until after the form submits to the server. You should not be trying to embed ASP/VBScript code within an HTML/JavaScript function.

jillmur

phpnovice wrote:
Server-side code executes only on the server and, therefore, cannot execute until after the form submits to the server. You should not be trying to embed ASP/VBScript code within an HTML/JavaScript function.

Can you suggest an alternate method for emailing the contents of the form?

Should I then validate the form with Javascript and call a separate ASP page in the form action and have that separate script execute the email script? I'm not sure I understand what the proper way to do this is. I'm pulling variables from the headers in this form also and don't know how to send them along to the alternate script in this case.

phpnovice

Yes, the FORM action should point to an ASP page capable for performing all the processing that you're needing. This would include sending an email.

qzn

jillmur were you aware that the first code you posted was missing a } for the function ending? unless this was just a copy paste woops it could certainly throw things off

jillmur

phpnovice wrote:
function formValidator(theForm)
{
    if (/^\s*$/.test(theForm.addrStreet.value))
    {
        alert("You must enter an address.");
        theForm.addrStreet.focus();
        return false;
    }
    return true;
}

That absolutely worked! Thank you.

If I want to validate additional fields, do I nest an else like this:

function formValidator(theForm)
{
if check state
{
alert
return focus
return false
}
else
if check state
{
alert
return focus
return false
}
else
if
.........................
return true
return true;
}

or test each individual item in sequence:

function formValidator(theForm)
{
if check state
{
alert
return focus
return false;
}
return true;

if check state
{
    alert
    return focus
    return false;
}
return true;

}

phpnovice

One way:

function isEmpty(fld, txt) {
    if (/^\s*$/.test(fld.value)) {
        alert(txt + " is required.");
        fld.focus();
        fld.select();
        return true;
    }
    return false;
}
function formValidator(theForm)
{
    if (isEmpty(theForm.field1, 'Field #1') return false;
    if (isEmpty(theForm.field2, 'Field #2') return false;
...etc...
    return true; // only ONE of these!!!
}

Tryah85

I made a simple form for learning to validate it with JavaScript and I provided the example in this Fiddle. <-- The fiddle errors on the browser, but if you cut and paste the code in notepad and save it locally it will work.

I have looked for answers online pertaining to making the code I created simpler. In the fiddle you can see that I have repeated code and I want to avoid that (DRY = Do not Repeat Yourself).'

I was thinking of putting one line like

var x = document.new_member.' + Names_of_input +  '.value == "" ||  document.new_member.' + Names_of_input +  '.value == null;

Taking that into some type of loop (like a for loop or while loop if the form expands over time). I know jQuery is probably the best solution as most js is already written, but I am doing this to learn and grow my skills.

Thank You