Good day. I am quite new to JavaScript and JQuery and I’m trying to add a form of validation to some form fields using JQuery.
I wrote a conditional statement that if the FULL NAME field is empty or less than 6, the HTML border-danger class will be added and there will be a message requesting the user to enter his/her full name. Else (if he has entered his full name or the content of the field is greater than 6), the border danger class should be removed and the status variable should be changed to true.
I tried it out on my browsers and it wasn't working.
The trick about it is that when I tried to ask the question here on StackOverflow, on the HTML/JS/CSS code snippet page, it worked. The border-danger class was added to the FULL NAME field when I clicked on the REGISTER button without typing anything in the field.
Please why is it not working on my side? (Chrome and Opera). Is there something i need to enable?
I have attached the code of the registration form (register.php) and that of the JavaScript(main.js). I have also attached a screenshot of the registration form from Chrome.
I’m sure I must have mixed something up.
Please I need help. I’ll really appreciate the help.
Thanks in anticipation
Javascript
$(document).ready(function(){
$("#registration_form").on("submit",function(){
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (name.val() == "" || fullName.length < 6 ) {
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
}else{
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
}
})
})
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container" ">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span>Login</span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
Forgot Password?
</div> -->
</div>
</div>
<body>
</html>
Few problem with your if condition and code.
You are not checking the length of anything at all
To check the length of input if its less then 6 you can do name.val().length
Also, you do not have to do like name.val() == "" this - just set!name.val() to false which means that there is no value in that input at all.
I could not find a fullName I am sure you want to use name
You can read more about jQuery - .val() here
I have made some changes in your if and now is working fine below. You can do some if else for other input as well the same to validate all the inputs before sending data to your PHP file.
You file directory must be this exact as below: Copy the HTML below and put in index.html and JS in to main.js - I have tested this my wamp64 localserver and all is working fine.
Location of main JS file: file:///C:/wamp64/www/inventory_blessed/public_html/js/main.js
Location of index.html: file:///C:/wamp64/www/inventory_blessed/public_html/index.html
Fiddle Demo: https://jsfiddle.net/usmanmunir/xob1d439/2/
Run snippet below to see it in action:
$(document).ready(function() {
$("#registration_form").on("submit", function() {
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (!name.val() || name.val().length < 6) {
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
} else {
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
}
console.log(status)
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span>Login</span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
Forgot Password?
</div> -->
</div>
</div>
<body>
</html>
I think the problem is, you are not loading right path of the main.js file at line <script type="text/javascript" src="../js/main.js"></script>. I guess your folder stucture is something like this:
your_folder:
-----| js
----------| main.js
-----| view_folder
----------| index.html
With your current code, maybe the problem you are facing right now is you are using the virtual local likes www.localhost.com/view_folder/index.html I think
So the solutions is, you should try to change the path
from ".../js/main.js" to "/js/main.js", in order to tell the browser to call to "www.localhost.com/js/main.js",
For not facing the bug related to path, I recommend not to use ../.. or ./ on file in script tag or link tag, use /file.js or file.js instead.
../js/main is relative path, so it's will only work well when the file you are opening is also relative path (like double click on html file or directly open the file). All the file path that is included in html file should not be used like that, because the domain maybe different sometime.
To know that your js file path is right or wrong, just try to open the dom in DevTools, and right click, open the link at src="../js/main.js".
Hope it help!
You can try to do it like this
$('#full_name').on('change', function(){
if ($('#full_name').length <6){
$('#full_name').addClass('border-danger');
}
});
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I have a thymeleaf template for form input where I use a js script. When in template it works fine but when I try to exclude it to external file it stops working. Probably I don't import it correctly but don't know what to change here because everything seems normal. Here are template and script (langSelect.js) files
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<header>
<title th:text="#{input.form.title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<h1 th:text="#{input.form}"></h1>
<div class="col-md-6">
<form action="#" th:action="#{/register}" th:object="${userForm}" method="post">
<div class="form-row">
<div class="form-group col">
<label th:text="#{first.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('firstName')}" class="form-control"
th:placeholder="#{first.name}" th:field="*{firstName}">
<input type="text" th:if="${#fields.hasErrors('firstName')}" class="form-control alert-danger"
th:placeholder="#{first.name}" th:field="*{firstName}">
<span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></span>
</div>
<div class="form-group col">
<label th:text="#{last.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('lastName')}" class="form-control"
th:placeholder="#{last.name}" th:field="*{lastName}">
<input type="text" th:if="${#fields.hasErrors('lastName')}" class="form-control alert-danger"
th:placeholder="#{last.name}" th:field="*{lastName}">
<span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></span>
</div>
</div>
<div class="form-group">
<label th:text="#{email}"></label>
<input type="text" th:unless="${#fields.hasErrors('email')}" class="form-control"
th:placeholder="#{email}" th:field="*{email}">
<input type="text" th:if="${#fields.hasErrors('email')}" class="form-control alert-danger"
th:placeholder="#{email}" th:field="*{email}">
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label th:text="#{password}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password}" th:field="*{password}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password}" th:field="*{password}">
<span th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label th:text="#{password.repeat}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<span class="error" th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{passwordsEqual}"></span>
</div>
<input class="btn-primary" type="submit" value="Submit"/> <input class="btn-primary" type="reset"
value="Reset"/>
</form>
<p></p>
<p></p>
<p></p>
<span th:text="#{lang.change}"></span>
<select id="locales">
<option value=""></option>
<option value="en" th:text="#{lang.eng}"></option>
<option value="ru" th:text="#{lang.ru}"></option>
<script type="javascript" src="langSelect.js"></script>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
$(document).ready(function () {
$("#locales").change(function () {
var selectedOption = $('#locales').val();
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
if (selectedOption !== '') {
var newUrl;
if (urlParams.has('lang')) {
var reExp = /lang=\w+/;
newUrl = queryString.replace(reExp, "lang=" + selectedOption);
} else {
if (queryString.includes('?')) {
newUrl = queryString.concat("&lang=" + selectedOption);
} else {
newUrl = queryString.concat("?lang=" + selectedOption);
}
}
window.location.replace(newUrl);
}
});
});
Please use th:src like this:
<script th:src="#{/js/langSelect.js}"></script>
Assuming you have your file inside the js folder, which is in your static folder - because the static folder is assumed to be the root path.
If you have your file directly under the static folder, try this:
<script th:src="#{langSelect.js}"></script>
Also, note that you don`t have to import your script on the exact place it is needed.
Your script will run automatically, when your page has completed loading - so it basically does not matter where you put it, but usually before the closing body tag is considered a good practice (so there together with the other scripts).
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?
I am trying to use the following validator http://1000hz.github.io/bootstrap-validator/ to validate a below form I copied most of the elements from the documentation of the validator plugin and when I press the submit button it always passes with out error.I added "data-toggle="validator" and it says it should automatically validateit.and i also tried to use the script at the bottom. can some one please show me a sample how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<h1>Register Below! </h1>
<form data-toggle="validator" role="form" method="post" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="inputName" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-3 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
<script >
(document).ready(function() {
$('#myForm').validator()
$('#myForm').submit(function (e) {
$('#myForm').validator('validate')
});
});
</script>
</body>
</html>
Couple of mistakes in your approach
No jQuery lib included (must be included above all other JS libraries)
bootstrap.min.js included twice (remove one)
missing $ before (document).ready(function() in script
missing id selector myForm in <form>
Rest nothing is wrong with the code
SideNote: validation can be done either with attribute data-toggle="validator" OR initialize on form via JS script $('#myForm').validator(), no need of both.
Fiddle with data-toggle="validator"
Fiddle with JS Script
I am trying to validate a form and display the validation result just under the text fields on submission of form as below.
But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.
My codes for this is:
formSumbit.html
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
console.log("hi");
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" ng-submit="signupForm()" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required && signup_form.submitted">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
But i am able to do the validation in on Blur event. see the code below which is working on onBlur.
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Try this:
Example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
Try to set the controller on the container div
<div ng-controller="signupController">
Check this example
http://codepen.io/sevilayha/pen/xFcdI