Click here to Skip to main content
15,880,469 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
I have a list with a number of fields that are using JavaScript validation. However, I do not know how to validate one textarea. Users will be able to enter as many terms as they want, however, I want my validation to make sure they begin each term with a capital letter while the rest of the term is lower case. I also want each term to be seperated with a comma and a space. If possible the last term does not need to have a comma after it. I appreciate any and all help. Please note I am using pure JavaScript. The textarea in question is called subjects.
Here is my code:

JavaScript
JavaScript
//Tutor Form validation
function validateForm2()
{
//Variable declarations for form inputs
var f=document.forms["TutorForm"]["fname"].value;
var s=document.forms["TutorForm"]["sname"].value;
var u=document.forms["TutorForm"]["uname"].value;
var e=document.forms["TutorForm"]["email"].value;
var a=document.forms["TutorForm"]["address"].value;
var p=document.forms["TutorForm"]["pass"].value;
var p2=document.forms["TutorForm"]["pass2"].value;
var sub=document.forms["TutorForm"]["subjects"].value;
var i=document.forms["TutorForm"]["info"].value;
 
var atsymb=e.indexOf("@");
var dotsymb=e.lastIndexOf(".");
var commasymb=e.indexOf(",");
 
if (f==null || f=="")
{
document.getElementById("valAlert2").innerHTML="You forgot to tell us your first name.";
return false;
} 
else if (s==null || s==""){
document.getElementById("valAlert2").innerHTML="Please tell us your surname.";
return false;
} 
else if (u==null || u==""){
document.getElementById("valAlert2").innerHTML="Here at MyTutor.ie a username is neccessary.";
return false;
} 
else if (e==null || e=="" || atsymb<1 || dotsymb<atsymb+2>=e.length){
document.getElementById("valAlert2").innerHTML="We require an email address in order to create your profile.";
return false;
} 
else if (a==null || a=="" || a.length < 6){
document.getElementById("valAlert2").innerHTML="Your address is required.";
return false;
}
else if (p.length < 6 || p==null || p==""){
document.getElementById("valAlert2").innerHTML="Password must be greater then 6 characters in order to to keep your information safe.";
return false;
} 
else if (p2.length < 6 || p2==null || p2==""){
document.getElementById("valAlert2").innerHTML="You must enter more then six characters.";
return false;
} 
else if (p != p2){
document.getElementById("valAlert2").innerHTML="Please make sure you re-entered your password correctly.";
return false;
}
else if (sub==null || sub=="" ||  || commasymb<atsymb+2>=e.length){
document.getElementById("valAlert2").innerHTML="We require an email address in order to create your profile.";
return false;
}
else if (i==null || i=="" ||i <30){
document.getElementById("valAlert2").innerHTML="You should tell us more in order to maximise your MyTutor.ie experience.";
return false;
} else{
alert(
f + " Welcome to MyTutor.ie");
}
 }

HTML
<!--Tutor Form-->
        <div class="col-md-6 col-sm-6">
            <div class="row contact-form1">
                <div id="valAlert2"></div>
                <h3>Tutor Form</h3>
                <form name="TutorForm"  onsubmit="return validateForm2()" method="post" id="TutorForm" >
                <fieldset class="col-md-6 col-sm-6">
                    <input id="fname" type="text" name="fname" placeholder=" First Name">
                </fieldset>
                <fieldset class="col-md-6 col-sm-6">
                    <input id="sname" type="text" name="sname" placeholder=" Surname">
                </fieldset>
                <fieldset class="col-md-6 col-sm-6">
                    <input id="uname" type="text" name="uname" placeholder=" User Name">
                </fieldset>
                <fieldset class="col-md-12">
                    <input type="email" name="email" id="email" placeholder="Email Address">
                </fieldset>
                 <fieldset class="col-md-12">
                    <input type="text" name="address" id="address" placeholder="Address">
                </fieldset>
                <fieldset class="col-md-12">
                    <input type="password" name="pass" id="pass" placeholder="Password">
                </fieldset>
                <fieldset class="col-md-12">
                    <input type="password" name="pass2" id="pass2" placeholder="Confirm Password">
                </fieldset>
                 <fieldset class="col-md-12">
                    <textarea name="subjects" id="subjects" placeholder="Please enter your specialist subjects that you are interested in teaching."></textarea>
                </fieldset>

                <fieldset class="col-md-12">
                    <textarea name="info" id="info" placeholder="Tell us any and all additional information about  yourself that you would like to appear on your profile."></textarea>
                </fieldset>
                <fieldset class="col-md-6 col-sm-6">
                    <input type="submit" name="send" value="Submit" id="submit" class="button">

                </fieldset>

                 <fieldset class="col-md-6 col-sm-6">
                    <input type="Reset" name="Reset" value="Reset Form" id="Reset" class="button" onclick="Reset()">
                </fieldset>
                </form>
                </div></div>
Posted
Updated 13-Aug-14 10:47am
v3
Comments
François Wahl 14-Aug-14 4:20am    
You could use a regex on a `keyDown` event of the textarea that cancels the input if invalid or you could let the user type in what they want and then format the text yourself by making all text lowercase then separate all text by space and capitalize each word's first character and append a `,` if it does not already exist - or similar.
Member 11000969 14-Aug-14 4:48am    
Thank you, I am essentially a beginner to coding. Your second option sounds do-able, can I do that using simple JavaScript?
Thanks
François Wahl 14-Aug-14 5:53am    
If you have a string like this for example `var wordString = 'theWord anOtherWord MayBemoreWords';` you can split into an array of words like this: `var words = wordString.split(' ')` - resulting in: `["theWord", "anOtherWord", "MayBemoreWords"]`. You can then iterate through them making all words lowercase and the first character uppcase similar to this: `for(var i = 0; i < words.length; i++){words[i] = words[i].toLowerCase(); words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);}` - then join the array back into a string adding `, ` (comma and space) between them as required, assigning the result back to the original source, similar to this: `wordString = words.join(', ')` - I hope this can help you in getting started.
Ganesh KP 14-Aug-14 10:09am    
As many people suggested, use RegEx for validating the correct input. It will help you in solving complex problems with little effort.

For reference use this link Link
Member 11000969 14-Aug-14 11:47am    
I apologise for sounding ignorant. But I don't know how to execute this? The link unfortunately is for C#, any sort of code suggestion would be greatly appreciated. The purpose is just so the data can be queried by a search bar, so any other simple suggestion would also be appreciated.
Thank you for your responses

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900