I am having problems with jQuery validation of a form.
This is my javascript file: test.js.
$(function() {
$('.error').hide();
$(".button").click(function() {
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
});
});
This is my html file.
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
</form>
</div>
</body>
</html>
I placed these two files together with the jQuery file in the same directory on my server, but the content "This field is required." is still visible. It seems like hide() function in the test.js doesn't work. Can anyone point me out where is wrong? Great thanks!
Put your jquery file before your test.js.
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="test.js"></script>
Related
I m applying two validation but both are not work
required validatation not work on input attribute
function validatation() not work
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="signup.js"></script>
<script type="text/javascript">
function validatation() {
debugger
if (document.PersonalInform.txtfname.value == "") {
debugger
alert("Please provide your first name!");
document.PersonalInform.Name.focus();
return false;
}
}
</script>
</head>
<body>
<form id="txtPersonalInformation" name="PersonalInform" onsubmit="return (validatation());">
<h1>Personal Information</h1>
First Name:<input id="txtfname" name="txtfname" type="text" /><br/>
Middle Name:<input id="txtmname" name="txtmname" type="text" /><br/>
Last Name:<input id="txtlname" name="txtlname" type="text" /><br/>
<input id="btnnext" type="button" value="Next" />
</form>
</body>
</html>
OR
Below Validation Also Not Work
First Name:<input id="txtfname" name="txtfname" type="text" required /><br/>
signup.js
$(document).ready(function () {
$('#btnnext').click(function (event) {
$("#txtPersonalInformation").load("ContactInformation.html");
});
});
I add this line in web.config file
web.config
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
</appSettings>
I want to perform this javascript function validation but not work?
function validatation()
Here's what you want. You weren't submitting you form, as noted by Mendrika.
HTML Form:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> type="text/javascript"></script>
<form id="some-form" action="some-url" onsubmit="return validate()">
<label for="first-name">First Name:</label>
<input id="first-name" name="first-name" type="text"><br>
<label for="last-name">Last Name:</label>
<input id="last-name" name="last-name" type="text"><br>
<input id="btn-submit" type="submit" value="Submit">
</form>
JS Sample Validate function
function validate() {
if ($("#first-name").val() === "") {
alert("Provide a first name");
$("#first-name").focus();
return false;
}
if ($("#last-name").val() === "") {
alert("Provide a last name");
$("#last-name").focus();
return false;
}
return true;
}
https://codepen.io/el-sa-mu-el/pen/QWjVGvb
Note, this is not good code, but it works. You should read more about basics of JS and form validation.
Some other observations:
Your form is missing the action=" " tag which actually POSTs the data to some URL. Where is your data going?
You are mixing vanilla Java Script and JQuery. Use JQuery for DOM access if you already included it, with the $ symbol.
You have a signup.js function but also include a Javascript function in the <script> tags. You can move the validate() function into the signup.js
Better form validation with JQuery:
https://www.sitepoint.com/basic-jquery-form-validation-tutorial/
The reason nothing works is because your form is never submitted.
You just need to change the next button type to submit.
<input id="btnnext" type="submit" value="Next"/>
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});
basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!
I am very new to jquery. Here what I'm trying to do is creating text box and button(login form). The following code is giveing me duplicate result. Is there something wrong with my code?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>
What is happening is the $(document).ready is being called twice. I think this may have to do with jQuery mobile.
See here:
jQuery $(document).ready () fires twice
And here:
http://forum.jquery.com/topic/jquery-jquerymobile-document-ready-called-twice
for more information.
A quick fix is to put the script tag in the head tag. See example below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$(".start").append('<div data-role="fieldcontain"><label for="username">User Name:</label><input type="text" name="username" id="username"></br><label for="password">Password:</label><input type="password" name="password" id="password"></div><div data-role="content"><input type="submit" value="Sign In"/></div>');
return false;
});
</script>
</head>
<body>
<br>
<br>
<div class="start">
<label class="control-label" for="inputEmail">Sign In to xRM 360</label>
</div>
<br>
<br>
</body>
</html>