Javascript form validation

Ok, well I have never really used javascript before, but I need to validate my forms. Here is the code I’m using… what am I doing wrong…


function validate() {
	mDv=mainform.article_date.value;
	mIv=mainform.article_id.value;
	mTv=mainform.article_title.value;
	mAv=mainform.article_author.value;
	mSv=mainform.article_summary.value;
	mRv=mainform.article_article.value;
	mSl=mainform.article_summary.value.length;
	if (mDv=='' || mDv==' ' || mDv=='  ') {
		alert('Please enter the Date the article was written.');
		event.returnValue=false;
	}else if (mIv=='' || mIv==' ' || mIv=='  ') {
		alert('Please enter an ID number for the Article.');
		event.returnValue=false;
	}else if (mTv=='' || mTv==' ' || mTv=='  '){
		alert('Please enter a title for the article.');
		event.returnValue=false;
	}else if (mAv=='' || mAv==' ' || mAv=='  '){
		alert('Please enter the name of the Author of the article.');
		event.returnValue=false;
	}else if (mSv=='' || mSv==' ' || mSv=='  '){
		alert('Please enter a short summary for the Article.');
		event.returnValue=false;
	}else if (mRv=='' || mRv==' ' || mRv=='  '){
		alert('Please enter the article.');
		event.returnValue=false;
	}else if (mSl>=256){
		alert('The Summary must be less than 255 characters.');
		event.returnValue=false;
	}
}

it worked when I was just validating one thing… here was the code that worked…


function validate() {
	mDv=mainform.article_date.value;
	if (mDv=='' || mDv==' ' || mDv=='  ') {
		alert('Please enter the Date the article was written.');
		event.returnValue=false;
	}
}

Its because your using else if.

See, with else if, it waits until one of those statements is true, and if not, it moves onto the next if. Until one of them is untrue.

So if the first textbox is empty, it will give the error for your first textbox and stop checking, but if the first textbox has something, and the second one doesn’t, then it will stop at your second one.

That make sense?

Use regular if statements.

<SCRIPT LANGUAGE="JavaScript">
<!--
function validate() {
    mDv=mainform.article_date.value;
    mIv=mainform.article_id.value;
    mTv=mainform.article_title.value;
    mAv=mainform.article_author.value;
    mSv=mainform.article_summary.value;
    mRv=mainform.article_article.value;
    mSl=mainform.article_summary.value.length;
    if (mDv=='' || mDv==' ' || mDv=='  ') {
        alert('Please enter the Date the article was written.');
        event.returnValue=false;
    }
	 if (mIv=='' || mIv==' ' || mIv=='  ') {
        alert('Please enter an ID number for the Article.');
        event.returnValue=false;
    }
	 if (mTv=='' || mTv==' ' || mTv=='  '){
        alert('Please enter a title for the article.');
        event.returnValue=false;
    }
	 if (mAv=='' || mAv==' ' || mAv=='  '){
        alert('Please enter the name of the Author of the article.');
        event.returnValue=false;
    }
	 if (mSv=='' || mSv==' ' || mSv=='  '){
        alert('Please enter a short summary for the Article.');
        event.returnValue=false;
    }
	 if (mRv=='' || mRv==' ' || mRv=='  '){
        alert('Please enter the article.');
        event.returnValue=false;
    }
	 if (mSl>=256){
        alert('The Summary must be less than 255 characters.');
        event.returnValue=false;
    }
}
-->
</SCRIPT>

I also found that using the String(expression) value to check the text areas works as well.

It checks to see if the text in the textbox is a string, and if not it returns false. So this means they can enter 100 spaces if they wanted, it still wouldn’t register.

Saves a lot of typing.

if (String(mDv) == false) {
        alert('Please enter the Date the article was written.');
        event.returnValue=false;
    }
	if (String(mIv) == false) {
        alert('Please enter an ID number for the Article.');
        event.returnValue=false;
    }
	if (String(mTv) == false){
        alert('Please enter a title for the article.');
        event.returnValue=false;
    }
	if (String(mAv) == false){
        alert('Please enter the name of the Author of the article.');
        event.returnValue=false;
    }
	 if (String(mSv) == false){
        alert('Please enter a short summary for the Article.');
        event.returnValue=false;
    }
	 if (String(mRv) == false){
        alert('Please enter the article.');
        event.returnValue=false;
    }
	 if (mSl>=256){
        alert('The Summary must be less than 255 characters.');
        event.returnValue=false;
    }

And just because I am bored, I will mention the ?: if/else statement.

I use it all the time in both JS and AS for my if/else statements. A lot of people don’t prefer it because it makes the code slightly unreadable, but I like to use it because it shortens the lines.

It is all personal preference though. The way this works is…

statement ? //do this : //else do this

so with statement you can have something like…

i == 2 ? document.write("I equals Two") : document.write("I Does Not Equal Two")

What this does is checks to see if i is == 2, and if it is, it writes that it is equal to two, and if it isn’t, it writes that it is not.

if you are not using an else you must replace the else statement with null to tell it not to do anything.

i == 2 ? document.write("I equals Two") : null

Ok, with that said, you could shorten your code like this if you wanted…

<SCRIPT LANGUAGE="JavaScript">
<!--
function ifFalse(message) {
    alert(message);
    event.returnValue=false;
}
function validate() {
    var mDv = mainform.article_date.value;
    var mIv = mainform.article_id.value;
    var mTv = mainform.article_title.value;
    var mAv = mainform.article_author.value;
    var mSv = mainform.article_summary.value;
    var mRv = mainform.article_article.value;
    var mSl = mainform.article_summary.value.length;
    String(mDv) == false ? ifFalse('Please enter the Date the article was written.') : null;
	String(mIv) == false ? ifFalse('Please enter an ID number for the Article.') : null;
	String(mTv) == false ? ifFalse('Please enter a title for the article.') : null;
	String(mAv) == false ? ifFalse('Please enter the name of the Author of the article.'): null;
	String(mSv) == false ? ifFalse('Please enter a short summary for the Article.') : null;
	String(mRv) == false ? ifFalse('Please enter the article.') : null;
	mSl >= 256 ? ifFalse('The Summary must be less than 255 characters.') : null;
}
-->
</SCRIPT>

Thanks beta, but just to make sure, it wasn’t working when I was using regular IF statements either. But I’ll try again and see what is up. Thanks again…

Jubba: I tested it out. The scripts I posted worked for the form I created :slight_smile:

ok… so why aren’t they working for me?

must be something with my form…

I have no clue man. What browser are you using?

I use IE 6 SP1 and NS7.

I did find one bug in NS… I fixed that though… You need to add document.mainform.blahblahblah.

<SCRIPT LANGUAGE="JavaScript">
<!--
function ifFalse(message) {
    alert(message);
    event.returnValue=false;
}
function validate() {
    var mDv = document.mainform.article_date.value;
    var mIv = document.mainform.article_id.value;
    var mTv = document.mainform.article_title.value;
    var mAv = document.mainform.article_author.value;
    var mSv = document.mainform.article_summary.value;
    var mRv = document.mainform.article_article.value;
    var mSl = document.mainform.article_summary.value.length;
    String(mDv) == false ? ifFalse('Please enter the Date the article was written.') : null;
    String(mIv) == false ? ifFalse('Please enter an ID number for the Article.') : null;
    String(mTv) == false ? ifFalse('Please enter a title for the article.') : null;
    String(mAv) == false ? ifFalse('Please enter the name of the Author of the article.'): null;
    String(mSv) == false ? ifFalse('Please enter a short summary for the Article.') : null;
    String(mRv) == false ? ifFalse('Please enter the article.') : null;
    mSl >= 256 ? ifFalse('The Summary must be less than 255 characters.') : null;
	if (String(mDv) && String(mIv) && String(mTv) && String(mAv) && String(mSv) && String(mRv)){
	alert('DONE!!!')
	}
}
-->
</SCRIPT>

I attached the .zip file of the form I created. It works on both NS7 and IE6 for me.

But note: In NS7 it doesn’t give you the errors one after another like IE does, it goes to the next unfilled area and gives an error for that.

Lostinbeta is a great script. thank you, this helped me out big time, much better than the one i was previously using.

:thumb: cool, I am glad this helped you out :slight_smile:

oh btw, this doesnt work with netscape 6, at least not for me, but i do have a lot of asp script on the same page. lucky for me the admin can only use IE 6 at my job, so there was no issue

Thanks for the info, I wasn’t able to test it on any other browser than IE6 and NS7.

hey no prob, thanks for the code :slight_smile: