Develop Reference

DirtyForms does not work on input hidden field

I added dirtyForms to my forms to detect any changes on one of the input fields https://github.com/snikch/jquery.dirtyforms
HTML
<form>
<input type="text" id="post" name="post">
<input type="hidden" id="body" name="body">
<froala-editor input="body">
</froala-editor>
</form>
Javascript
$('document').ready(function() {
$('form').dirtyForms();
});
However for input hidden seems like it doesn't add the dirty class, it only works for input type="text" . Any ideas on how to solve this problem?

Because it does not make sense when the user is not the one entering the data in the field.
You can do it yourself
SO does not allow the editor so I tested here
$('form').toggleClass('mydirty', e.target.textContent !== "");
tests the editor, it makes more sense than the input field
https://plungjan.name/SO/froala/
$('form').dirtyForms({
helpers: [{
isDirty: function($node, index) {
if ($node.is('form')) {
return $node.hasClass('mydirty');
}
}
}]
});
var editor = new FroalaEditor('#froala')
$(document).on("keyup", function(e) {
$('form').toggleClass('mydirty', e.target.textContent !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.2.3/js/froala_editor.min.js"></script>
<form>
<input type="text" id="post" name="post">
<input type="hidden" id="body" name="body">
<div id="froala" input="body">
</div>
</form>

How to give custom validation error messages for HTML validations?

When I use default HTML validation it shows the default error messages which is not I want to show to my clients. I need to customize the message and give different massages for each validations such as min, max, type and require. For Example:
The field is required, The value does not match
Refer the tradition HTML Code:
<input type="text" required>
I want something like this:
<input type="text" validation="required|my_message,min:5|my_message">

It's totally possible with custom libraries in jQuery which I would suggest - https://github.com/aslamanver/abvalidate
Custom Message - jQuery Form Validation - abValidate.js
ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name"
Use this library by adding these CDNs
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- abValidate Library -->
<script type="text/javascript" src="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.min.js">
<link rel="stylesheet" href="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.css">
Initialize the library
$(document).ready(function () {
//.ab-form is your form class
$(".ab-form").abValidate();
});
There you go, now you can use your custom validation using jQuery abValidate library
<form class="ab-form" action="your_action_url">
<!-- Input and error message should be in a div class -->
<div class="my-form-group">
<input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name" class="ab-validation-i" />
<div class="error"></div>
</div><br>
<div class="my-form-group">
<input type="submit" name="submit" value="Submit">
</div>
</form>

Try this one, its better and tested:
HTML:
<form id="myform">
<input id="email"
oninvalid="InvalidMsg(this);"
oninput="InvalidMsg(this);"
name="email"
type="email"
required="required" />
<input type="submit" />
JAVASCRIPT:
function InvalidMsg(textbox) {
if (textbox.value === '') {
textbox.setCustomValidity('Required email address');
} else if (textbox.validity.typeMismatch){
textbox.setCustomValidity('please enter a valid email address');
} else {
textbox.setCustomValidity('');
}
return true;
}
Demo:
http://jsfiddle.net/patelriki13/Sqq8e/

.HTML File has Password in URL [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I usually code in Java, but I knew a little HTML, so I decided I would learn more. My problem is that I have a password field and a submit button. When I hit the button, it checks to see if the password is right, and then asks you what your name is. It then changes a text field to say You got it right, NAME. The thing is, when you hit submit, the code submitted is added to the URL, so if you type password as the password, ?password is added on to the URL. That is fine with me, but since the URL is changed, the page reloads, making the text field go back to normal. I am using Google Chrome. Is there anyway around this, or is it because I am running a .HTML file, not going to a website?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Ryan Club Homepage</title>
<script>
function codeEnter(){
var s = document.getElementById("in").value;
var correct = "lolliPiper5";
if(s === correct){
var name = prompt("What is your name");
document.getElementById("cde").innerHTML = "You got the password right!, " + name;
}
}
</script>
</head>
<body style="font-family:'Myriad Pro' ">
<form onsubmit="codeEnter();">
<input type="password" name="code" id="in">
<br />
<input type="submit" value="Ready!">
</form>
</body>
</html>
Thank you!

You need to use JavaScript / jQuery to prevent the form from submitting. I am using jQuery 2.1.1.
For password field let's assume it 123 for now.
The e.preventDefault() method stops the default action of an element from happening. Here it stops the submit button to submit the form to URL specified in form's action attribute.
$(document).ready(function(){
$("#name_container").hide();
$('#submit').on("click",function(e){
e.preventDefault();
$password = $('#password').val();
if($password == '123'){
$("#password_container").hide();
$("#name_container").show();
$("#result").html("");
}
else{
$("#result").html("Password is incorrect.");
}
$name = $("#name").val();
if($name != '' && $name != null ){
$("#form").hide();
$("#result").html("You got it right, "+$name);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" method="post" id="form">
<div id="password_container">
Password: <input type="password" id="password" />
</div>
<div id="name_container">
Name: <input type="text" id="name" />
</div>
<input type="submit" id="submit">
</form>
<div id="result">
</div>
(Updated)
Here you go:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="font-family:'Myriad Pro' ">
<form id="form" method="post" action="#">
Password:
<input type="password" name="code" id="in">
<br />
<input type="submit" value="Ready!" id="submit">
</form>
<div class="ps"></div>
<script>
$(document).ready(function () {
$('#submit').on("click", function (e) {
e.preventDefault();
$password = $('#in').val();
if ($password == 'lolliPiper5') {
$name = prompt("Enter your name", "ACCESS GRANTED");
$(".ps").html("Welcome to the team, " + $name);
}
});
});
</script>
</body>
</html>

In your simplified (I hope) code you need at least set
<form onsubmit="return codeEnter()">
...
// and in the script
function codeEnter(){
var s = document.getElementById("in").value;
var correct = "lolliPiper5";
if(s === correct){
var name = prompt("What is your name");
document.getElementById("cde").innerHTML = "You got the password right!, " + name;
}
else return false; //do not submit
}

In the real world if you actually wanted to submit the password, hidden from the user you would change the form code to
<form onsubmit="codeEnter();" method="post">
By default the form submits data to the server via a GET request which causes the values to show in the url, thus this is usually only used for making queries such as page numbers (?page=num) etc (all insensitive data).
However, when you set method="post" the form sends data using a POST request which is invisible to the user and in some cases encrypted before sending and therefore much safer.
An example of a for using method="POST" can be found here

JQuery UI Dialog Not Showing when using a separate JS File

I'm new to Javascript and JQuery and i want to create a basic social website. I got stuck on the login page though. What i basically want the website to do is when you click Login a dialog will popup and say that your password and username are not correct and two buttons to say sign up and cancel. I understood you can do that using JQuery Dialog UI but im struggling doing it. These are my HTML, Javascript and CSS page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog when submit is clicked and checked
function showDialog(){
/* select the div you want to be a dialog, in our case it is 'basicModal'
you can add parameters such as width, height, title, etc. */
$( "#basicModal" ).dialog({
modal: true,
title: "Are you sure?",
buttons: {
"YES": function() {
window.open('signup.html');
},
"NO": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<script src="js/script.js"></script>
</head>
<body>
<section class="loginform">
<form name="login" action="" method="post" onsubmit="return check(login)" accept-charset="utf-8">
<ul>
<li><label for="usermail">Email</label>
<input type="username" name="username" placeholder="username" required></li>
<li><label for="password">Password</label>
<input type="password" name="password" placeholder="password" required></li>
<li>
<input type="submit" value="Login" ></li>
</ul>
</form>
</section>
<!--
-this is the actual dialog, yes, it is included in your html body, it is just hidden
-we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
You mad? Username and Password are not correct. Please sign up using the button below.
</div>
</body>
</html>
This is my Javascript Page
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
}
}
And my css
ul
{
list-style-type: none;
}
.loginform {
margin: 20% auto;
width:200px;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}

You need to return false from the check() function to prevent the form from submitting:
function check(form) {
/*the following code checkes whether the entered email and password are matching*/
if (form.username.value === "user" && form.password.value === "pass") {
window.open('home.html'); /*opens the target page while Id & password matches*/
} else {
//alert("Password or Username Not Found. Please sign up."); /*displays error message*/
showDialog();
return false;
}
}
You also have a syntax error. There shouldn't be ); at the end of showDialog().
Here's a working fiddle

JS Form Validation

<html>
<head>
<title>Coupon test code</title>
<style>
#error{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form name="couponField" action="">
<span id="error"></span>
Coupon code:
<input type="coupon" id="coupon" name="coupon">
<input type="button" id="submit" value="Apply Coupon Code">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$('#submit').click(function(){
if($('#coupon').val() == 'PROMO CODE'){
$('#error').text('correct code!');
}else{
$('#error').text('wrong code!');
}
});
</script>
</body>
</html>
The above code does the following:
1. Validate if the coupon code entered is exactly equal to 'PROMO CODE'
2. Validate if the field is empty.
What we are trying to do:
1. Keep the validation for 'PROMO CODE' intact.
2. Remove the validation for the empty field.
This is a part of an order form wherein we want the users to enter the promo code. But since all the users may not have the promo code we want to give the users the option to leave the field empty. The current validation is making this field a 'required' field.
Any suggestions are much appreciated. Thanks!

$('#submit').click(function(){
var input = $('#coupon').val();
if(input === 'PROMO CODE'){
$('#error').text('correct code!');
} else if (input !== ''){
$('#error').text('wrong code!');
}
});
make sure you use === instead of == in JavaScript.