validation not working for js

Question

<html>
<head>
</head>
<body>
<form class="form-horizontal cmxform" id="validateForm" method="get" action="../../course_controller" autocomplete="off">


<input type="text" id="course_name" name="course_name" placeholder="Enter Course Name..." class="row-fluid" required onkeyup="javaScript:validate_course_name();">
<label id="course_name_info" style="color:rgba(255,255,255,0.6);font-size:13px">
</label>



<button type="submit" name="user_action" value="add" class="btn btn-primary" onClick="javaScript:validate();" >Save</button>
<button type="reset" class="btn btn-secondary">Cancel</button>



</form>
<script type="text/javascript">
/**** Specific JS for this page ****/

//Validation things




function validate_course_name(){

var TCode = document.getElementById('course_name').value;

if( /[^a-zA-Z1-9 _-]/.test( TCode ) ) {

course_name_info.innerHTML="Please Enter Only Alphanumeric or _,-,' ' ";
return false;
}
else
{
course_name_info.innerHTML=" ";
return true;
}


}
function validate(){


validate_course_name();

}
</script>
</body>
</html>

So this the code ...I am applying alpha numeric validation on one field but even if i give invalid input like some other characters the form is getting submitted where am i doing it wrong? i am very new to this web so any help will be appreciated:)

As @Duffmaster33 said simply change onClick to javascript:return validate_course_name(); — Horst
– Horst, Commented May 15, 2013 at 2:01
Is that carrot suppose to left anchor? I think it goes out of the character set brackets. Also if you left anchor, why not right anchor? And character sets only match a single char, you'd want + for at least one. /^[a-z whatever]+$/ maybe? — jpsimons
– jpsimons, Commented May 15, 2013 at 2:27
@darkporter nopes it right the way i did it ...problem is some where else:S — user2137186
– user2137186, Commented May 15, 2013 at 3:06
Oh right, the carrot negates the character set, not anchors. — jpsimons
– jpsimons, Commented May 16, 2013 at 3:58

Duffmaster33 · Accepted Answer · 2013-05-15 02:03:53Z

2

There are several issues here. First, you are never returning the result, so even if the function results in false, it is not returned to the form so the form goes on its merry way. To fix, you can add an onsubmit to the form tag, or even better attach an onsubmit event to the form.

onsubmit="return validate();"

Second, you only need the one function, calling a function from another function is not necessary here, and results in an additional level of difficulty since you will need to return the result to the wrapper function, which will then need to return that result to the form.

//Validation things
function validate() {
    var TCode = document.getElementById('course_name').value;
    if (/[^a-zA-Z1-9 _-]/.test(TCode)) {
        course_name_info.innerHTML = "Please Enter Only Alphanumeric or _,-,' ' ";
        return false;
    } else {
        course_name_info.innerHTML = " ";
        return true;
    }
}

Here is a working fiddle of your example: http://jsfiddle.net/duffmaster33/nCKhH/

edited May 15, 2013 at 2:03

answered May 15, 2013 at 1:57

Duffmaster33

1,1889 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2137186 Over a year ago

i need to call more than one function in that validate function...i just did that to make it simple

Bemmu · Accepted Answer · 2013-05-15 02:01:43Z

1

Your validate() function should return the result of the validation. Currently the result of validate_course_name is discarded. In other words, it should look something like this

function validate(){
    return validate_course_name();
}

Also you might want to move the validation to

<form onsubmit="return validate()" ...

edited May 15, 2013 at 2:01

answered May 15, 2013 at 1:54

Bemmu

18.3k16 gold badges82 silver badges94 bronze badges

2 Comments

user2137186 Over a year ago

well the validation function is calling validate_course_name() which is returning the result

Bemmu Over a year ago

Sorry I was not clear, I added some example code to the answer.

Kalpers · Accepted Answer · 2013-05-15 02:22:39Z

0

You need to wrap course_name_info with a getElementById

document.getElementById('course_name_info').innerHTML="Please Enter Only Alphanumeric or _,-,' ' ";

and then change the style of the label so the font isn't white on white background.

Hope that fixes it.

answered May 15, 2013 at 2:22

Kalpers

6586 silver badges11 bronze badges

1 Comment

Kalpers Over a year ago

Try it here: plnkr.co/edit/gTvvuPtKFDa4jTaZ6y0m It appears you are accepting any letter, number, _, or - so I used the * and received your error message.

Collectives™ on Stack Overflow

validation not working for js

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related