/    Sign up×
Community /Pin to ProfileBookmark

javascript alerts

Hi,

I am working on validating a form using regular expressions. The only method I know is by validating the form line by line.

example:

[code=php]function ValidForm2(passForm){
if (!myfirst.test(passForm.bfname.value)) {

alert (“Please enter a valid firstname”);

passForm.bfname.focus()
passForm.bfname.select()
return false;
}
if (passForm.bfname.value == “”) {

alert (“Please enter all mandatory fields”);
passForm.bfname.focus()
passForm.bfname.select()

return false;
}[/code]

…….ETC
……..
return true;
}

I have 2 questions:

1) How can we in javascript display the alert in the form itself and not as a popup. When the user clicks submit if any of the fields values if not valid, one error message appears on the top and perhaps some text next to the field(s)

2) Using my method of alerts for each field (as in the code above), I get the alertbox and when I click on it I get transferred to the next page where my form is POSTING to. And obviously there I get an SQL message because my query wouldn’t run because the data entered in the formwas not valid.
Why is this happening (why does the form page immediately takes me to the next page immediately when i click ok on the alert box, without focusing on the field that had the error according to my function)?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@BoarsHellMar 25.2007 — For your first question you can put the error message into your html by using spans...

[code=html]
<span id="text_error_name">This text will change</span>

<script type="javascript">
function changeText(spanId, changeToThisText){
document.getElementById("text_error_name").innerHTML = changeToThisText;
}
</script>
[/code]


For your second question you may have an error in your html. You need to make sure your form does not submit if your function returns [COLOR="Blue"]false[/COLOR]. If you need help with this, post your html form.
Copy linkTweet thisAlerts:
@mjdamatoMar 26.2007 — Aslo in reference to your second question; where are you calling these functions from. Ideally you should call them using the onsubmit trigger of the form. Then if you return false it will prevent the form from being submitted.
Copy linkTweet thisAlerts:
@memeauthorMar 26.2007 — Thank you both.

Firstly, I am nots ure how to use the function you posted.

[code=php]<span id="text_error_name">This text will change</span>

<script type="javascript">
function changeText(spanId, changeToThisText){
document.getElementById("text_error_name").innerHTML = changeToThisText;
}
</script>[/code]


I am sorry, but I am not that advanced yet in javascript. How do I use the function and which values do I substitute? for example would I put the error messae in the span, but then how do I relate this function to my function which does the regular expression check? Also, I assume it displays the message in the page itself rather than in an alert box?

Secondly, I am calling the functions I am using in my form.
[code=php]function validForm(passForm){

if (passForm.bfname.value == "") {

alert ("Please enter all mandatory fields")
passForm.bfname.focus()
passForm.bfname.select()

return false;
}

if (passForm.blname.value == "") {

alert ("Please enter all mandatory fields")
passForm.blname.focus()
passForm.blname.select()

return false;
}
return true;
}
....
....
echo "<form action='confirm2.php' onsubmit= 'validForm(this)' method='post'>";
[/code]
Copy linkTweet thisAlerts:
@memeauthorMar 26.2007 — Right, after 2 sleepless nights I figured out the return was missing on my onSubmit function call!

One problem solved. I am still looking for a way to display one error message for all the invalid fields in a form AND may be change the colour of the invalid fields to red.

BoarsHell, please see my questions about your function in my earlier post.

Many thanks.
×

Success!

Help @meme spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...