CODEWITHSUNDEEP
javascriptjquery
user2137186
user2137186

Reputation: 837

validation not working for js

<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:)

Upvotes: 1

Views: 306

Answers (3)

Kalpers
Kalpers

Reputation: 658

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.

Upvotes: 0

Duffmaster33
Duffmaster33

Reputation: 1190

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/

Upvotes: 2

Bemmu
Bemmu

Reputation: 18247

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()" ...

Upvotes: 1

Related Questions