Javascript validation of text editor (ckeditor) is not working - javascript

I have made the coding of javascript validation for editor(i am using ckeditor).It is not working properly.i.e when i am going to submit the form at first the alert box is coming as the editor is empty but when i am adding some content and going to validate it ,still the alert box is coming.After it everything goes fine.But i want that the alert box will come once ,when the editor field is empty.So please suggest me.Below is my coding.Thank you.
<script type="text/JavaScript">
function validate()
{
var descrip = document.getElementById("description").value;
if(descrip == "") {
alert("Please Enter partner description");
document.getElementById("description").focus();
document.getElementById("description").style.borderColor="#fd00d6";
return false;
}
}
</script>
<script src="ckeditor/ckeditor.js"></script>
<form role="form" action="" method="post" enctype="multipart/form-data" onsubmit="return validate();">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Partner Description</label>
<textarea id="description" name="description" rows="10" cols="80" class="ckeditor" ><?php echo $_REQUEST['description']; ?> </textarea>
</div>
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary" name="add_partner">Submit</button>
</div>
</form>

After reserching a lot ,finally i have found the solution for it.
Instead of using
var descrip = document.getElementById("description").value;
if we use
var get_desc = CKEDITOR.instances['description'].getData();
Then we can get the accurate result of that text editor associate field.
when editor is empty ,it will return null ,otherwise the the editor value it self.
Here we can simply get the (get_desc) ,according to which we can validate the field.
Its working fine.I have tested it .Thank you.

Related

Javascript form validation - PHP variable as VALUE - Invalid Input

I have an issue where I am validating form submission with javascript. The form is prefilled with results from the database as PHP values like this:
<form name="profiledit" action="profile_edited.php" method="POST" >
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname"
value="<?php echo $result['teamname'];?>">
</form>
This is the javascript:
<script type="text/javascript">
function empty() {
tn = document.getElementById("teamname").value;
if (! /^[a-zA-Z0-9]+$/.test(tn)) {
alert("Please enter a valid Team Name");
return false;
}
}
</script>
The submit button is :
onClick="return empty();"
The problem is that is always tells me top "Please enter a valid Team Name" unless I retype the text in the box (that was supplied by the PHP value).
I cannot see any weird spaces or things in "view source".
What could the problem be?
Thanks.
EDIT1 : Sorry I forgot to paste closing brace. It was there in the code and this does work for BLANK forms OK. Just not when it has a prefilled value from PHP.
Try this
Check this link
Html
<form name="profiledit" action="" method="POST" id="profiledit">
<h3>Name:</h3>
<input type="text" id="teamname" name="teamname" value=""/>
<input type="button" id="submit" value="submit" name="submit" />
<input type="submit" id="submitform" value="submitform" name="submit" style="display:none;" />
</form>
Jquery
$('#submit').click(function(){
var pattern=/^[a-zA-Z0-9]*$/;
var tn = $("#teamname").val();
if(tn == "" && pattern.test(tn)){
alert('1');
}else {
//alert('2');
$('#submitform').trigger('click');
}
});
Hope its helps
Well, there was nothing wrong with the responses after all. My code was good and you guys code was good as well.
The problem?
Well I just happened to be testing with a teamname that had a SPACE in it!!!!!!!!!!
So having finally worked out that was the problem all along I would like to thank you all for your inputs.
I have used the regex instead : /^\w+( \w+)*$/
Allows words, numbers and a space.

How to make a certain pattern or algorithm when entering staff id in login form?

I am trying to make a login form with an input for Staff ID, Password, and submit. For say, software has a serial # that will only be accepted if it matches the pattern or format of the serial that is required for the software. How would I do that? I want it to have a thumbnail that will popup and tell you that is is not the proper format kind of like required does when you put in in the input tag. I want to also be able to possibly style the thumbnail as well, in order to make it match the UI of the site.
html form:
<section name="LoginSection" id="LoginSection" class="LoginSection">
<div name="LoginHeader" id="LoginHeader" class="LoginHeader">
<center><h3>Staff Login</h3></center>
</div>
<form name="LoginForm" id="LoginForm" class="LoginForm" action="">
<input type="text" placeholder="Staff Identification Number" name="StaffInput" id="StaffInput" class="StaffInput" required />
<input type="password" placeholder="Staff Login Password" name="StaffPass" id="StaffPass" class="StaffPass" required />
<center><input type="submit" value=" Submit " name="Submit" id="Submit" class="Submit" /></center>
</form>
</section>
try more on HTML5 thing:
<input type="tel" name="mobileno" pattern="[789][0-9]{9}" required title="Enter Mobileno in correct format"/>
Or if you want it using Javascript something like :
<script type="text/javascript">
function login()
{
if(document.loginFrm.mobileno.value.length==0 )
{
alert('Enter MobileNo please');
document.loginFrm.mobileno.focus()
}
//return false
}
</script>
i think you can get your imagination for combination some html css and php. or with bootstrap design ?
for example :
<?php
if(isset($_POST['submit'])){
if($_POST['name'] == NULL && $_POST['pass'] == NULL){
echo'<div class="login">
<span> It didn't work ! </span>
</div>';
}
}
hehe i always do that if i want to combine skill with css html and php :)
You can see my update answare with jquery :
$(document).ready(function(){
$('#button').click(function(){
if($('#txt-name').val() == '' && $('#txt-pwd').val() == ''){
alert('It didn't work');
}
});
});

Alert box shows form data when clicking button

I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work

Unable to get Alert Pop-Up on IE...Works fine in Firefox,Chrome etc.?

I am trying to get pop-up block when there is no text/blank space. It is working fine in Firefox, Chrome &Safari.
Please check below code in my JavaScript file-:
function submitQuestion(URL,docId,errorMessage)
{
var question = $('textField').value;
if(!question.blank())
{
var submitForm = $("question-form");
submitForm.action = URL+"docId="+docId+"&question="+encodeURIComponent(question);
//alert(submitForm.action);
submitForm.submit();
}
else
{
alert(errorMessage);
return false;
}
}
Above function works fine in Firefox,Safari &Chrome as when there is nothing in textbox (i.e. empty/blank) then it goes to else &prompt errorMessage as a pop-up but in IE, it doesn't go to else &errorMessage pop-up never come.
Please check below code for my forntend form-:
<form method="POST" id="question-form" onsubmit="return submitQuestion('https://localhost/question-post!input.jspa?','ABC12','Enter your question!');">
<span class="fieldwrap">
<input type="text" placeholder="Ask customers about this document" value="" maxlength="255" autocomplete="off" class="questionInputField" id="textField">
</span>
<div class="clear"></div>
<div id="question-submit" class="widget-div clearfix">
<input type="submit" value="Submit question to the portal" class="questionSubmitFormButton">
</div>
</div>
</form>
What happened here in IE is it will take placeholder as a value for text field when we didn't provide any i.e. When we keep text field empty or blank then it will take placeholder as a text field value &instead of giving pop-up alert, it goes to if loop which should not be a case.
To access the value of the textField using jQuery, you should use val() instead of value.
var question = $('textField').val();
if (question != '') {
//
}
else {
//
}
Below is a working example:
<!DOCTYPE html>
<head>
<title>EXAMPLE</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function submitQuestion(URL, docId, errorMessage) {
var question = $('#textField').val();
if (question.trim() != "") {
var submitForm = $("#question-form");
submitForm.attr("action", URL + "docId=" + docId + "&question=" + encodeURIComponent(question));
return true;
}
else {
alert(errorMessage);
return false;
}
}
</script>
</head>
<body>
<form method="POST" id="question-form" onsubmit="return submitQuestion('https://localhost/question-post!input.jspa?','ABC12','Enter your question!');">
<span class="fieldwrap">
<input type="text" placeholder="Ask customers about this document" value="" maxlength="255" autocomplete="off" class="questionInputField" id="textField">
</span>
<div class="clear"></div>
<div id="question-submit" class="widget-div clearfix">
<input type="submit" value="Submit question to the portal" class="questionSubmitFormButton">
</div>
</form>
</body>

Why my form doesn't validate correctly?

I'm trying to validate a form, but doesn't work :\ , When I submit the form goes to mail.php even if the required fields are missing, but I set onsubmit to validate() so it should check, but doesn't work. What's the problem with my code? I can't find it.
HTML:
<form action="mail.php" onsubmit="return validate()" method="post" class="contact-form" id="contactForm">
<div id="errors"></div>
<label for="author">Name:</label><br/><br/>
<input type="text" name="author" id="message" /><br/><br/>
<label for="author">Message:</label><br/><br/>
<textarea name="message" id="message"></textarea><br/><br/>
<input type="submit" class="button" value="Send Message"/>
</form>
Javascript:
<script type="text/javascript">
function error(message){
return "<p class=\"error\">"+message+"</p>";
}
function validate(){
var form = document.getElementById("contactForm");
var author = document.getElementById("author");
var message = document.getElementById("messsage");
var errors = document.getElementById("errors");
alert(author.value);
if(message.value == '' || author.value == ''){
errors.innerHTML = error("Please fill in all fields.");
return false;
} else {
return true;
}
}
</script>
id=author on your first input element.
Also check out jQuery it will save you time in the long run
You have two elements with the id message and none with author.
The Markup Validator would have picked this up for you.
var message = document.getElementById("messsage");
message has an extra "s".
<input type="text" name="author" id="message" />
You need to change "message" to "author"
This is wrong:
<input type="text" name="author" id="message" />
Need to set name and id to the same values (you're using id="message" for the next field, so there's a clash.
Also both your label tags have for="author"; the second one is wrong.
I guess your problem here is too much copy+paste. ;)

Categories