How to achieve a HTML check in JavaScript and jQuery
-1
I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li.
What I am trying to achieve (when user has filled it out correctly):
<div class="form-group has-success has-feedback ">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
How my code looks like:
function InputChecker(InputChecker, tracker) {
let div = ($('<div/>', {
'class': InputChecker
}));
return div;
}
function password(tracker) {
let input = ($('<input/>', {
'type': 'password',
'name': 'password',
'class': 'form form-control',
'id': 'password',
'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
'required': true
})).on('keyup', function() {
tracker.pwd = $(this).val();
if ($(this).val().length < 8) {
var x = InputChecker('form-group has-success has-feedback', tracker);
console.log(x);
$(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
} else {
// Do something else
}
});
return input;
}
How my document.ready looks like:
let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');
How my HTML looks like:
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="registerAndLogin.php" method="POST" id="registerAndLogin">
</form>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
</body>
javascript jquery html
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
add a comment |
-1
I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li.
What I am trying to achieve (when user has filled it out correctly):
<div class="form-group has-success has-feedback ">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
How my code looks like:
function InputChecker(InputChecker, tracker) {
let div = ($('<div/>', {
'class': InputChecker
}));
return div;
}
function password(tracker) {
let input = ($('<input/>', {
'type': 'password',
'name': 'password',
'class': 'form form-control',
'id': 'password',
'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
'required': true
})).on('keyup', function() {
tracker.pwd = $(this).val();
if ($(this).val().length < 8) {
var x = InputChecker('form-group has-success has-feedback', tracker);
console.log(x);
$(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
} else {
// Do something else
}
});
return input;
}
How my document.ready looks like:
let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');
How my HTML looks like:
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="registerAndLogin.php" method="POST" id="registerAndLogin">
</form>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
</body>
javascript jquery html
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Inserting alidirectly after aninputcould not create a valid DOM structure to begin with though.lineeds to be a child of a list.
– misorude
Nov 13 '18 at 12:21
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
Where do you want<li>in form? does<li>contain any data?
– NAVIN
Nov 20 '18 at 12:05
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57
add a comment |
-1
-1
-1
I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li.
What I am trying to achieve (when user has filled it out correctly):
<div class="form-group has-success has-feedback ">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
How my code looks like:
function InputChecker(InputChecker, tracker) {
let div = ($('<div/>', {
'class': InputChecker
}));
return div;
}
function password(tracker) {
let input = ($('<input/>', {
'type': 'password',
'name': 'password',
'class': 'form form-control',
'id': 'password',
'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
'required': true
})).on('keyup', function() {
tracker.pwd = $(this).val();
if ($(this).val().length < 8) {
var x = InputChecker('form-group has-success has-feedback', tracker);
console.log(x);
$(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
} else {
// Do something else
}
});
return input;
}
How my document.ready looks like:
let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');
How my HTML looks like:
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="registerAndLogin.php" method="POST" id="registerAndLogin">
</form>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
</body>
javascript jquery html
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
I want to create a check that will create the class form-group has-success has-feedback in a div and glyphicon glyphicon-ok form-control-feedback in an li.
What I am trying to achieve (when user has filled it out correctly):
<div class="form-group has-success has-feedback ">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
How my code looks like:
function InputChecker(InputChecker, tracker) {
let div = ($('<div/>', {
'class': InputChecker
}));
return div;
}
function password(tracker) {
let input = ($('<input/>', {
'type': 'password',
'name': 'password',
'class': 'form form-control',
'id': 'password',
'placeholder': 'Fill in your password (minimum length of 8 characters required!)',
'required': true
})).on('keyup', function() {
tracker.pwd = $(this).val();
if ($(this).val().length < 8) {
var x = InputChecker('form-group has-success has-feedback', tracker);
console.log(x);
$(this).after('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
} else {
// Do something else
}
});
return input;
}
How my document.ready looks like:
let inputFieldStructure = $(eBlock('col-md-6 col-md-offset-3', tracker).append(InputChecker('', tracker)));
inputFieldStructure.append(loginName(tracker), userName(tracker), password(tracker), confirmPassword(tracker)).appendTo('#registerAndLogin');
How my HTML looks like:
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="registerAndLogin.php" method="POST" id="registerAndLogin">
</form>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
</body>
javascript jquery html
javascript jquery html
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
edited Nov 20 '18 at 13:26
wanttobeprofessional
1,03531323
1,03531323
asked Nov 13 '18 at 12:09
user10579402
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Inserting alidirectly after aninputcould not create a valid DOM structure to begin with though.lineeds to be a child of a list.
– misorude
Nov 13 '18 at 12:21
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
Where do you want<li>in form? does<li>contain any data?
– NAVIN
Nov 20 '18 at 12:05
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57
add a comment |
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Inserting alidirectly after aninputcould not create a valid DOM structure to begin with though.lineeds to be a child of a list.
– misorude
Nov 13 '18 at 12:21
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
Where do you want<li>in form? does<li>contain any data?
– NAVIN
Nov 20 '18 at 12:05
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Inserting a
li directly after an input could not create a valid DOM structure to begin with though. li needs to be a child of a list.– misorude
Nov 13 '18 at 12:21
Inserting a
li directly after an input could not create a valid DOM structure to begin with though. li needs to be a child of a list.– misorude
Nov 13 '18 at 12:21
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
Where do you want
<li> in form? does <li> contain any data?– NAVIN
Nov 20 '18 at 12:05
Where do you want
<li> in form? does <li> contain any data?– NAVIN
Nov 20 '18 at 12:05
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57
add a comment |
1 Answer
1
active
oldest
votes
0
Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280734%2fhow-to-achieve-a-html-check-in-javascript-and-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
add a comment |
0
Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
add a comment |
0
0
0
Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
Just need two changes based upon information provided:
HTML:
<div id="passwordDiv">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span id="passwordSpan"></span>
</div>
</div>
JS on success:
if ($(this).val().length < 8) {
$("#passwordDiv").addClass("form-group");
$("#passwordDiv").addClass("has-success");
$("#passwordDiv").addClass("has-feedback");
$("#passwordSpan").addClass("glyphicon");
$("#passwordSpan").addClass("glyphicon-ok");
$("#passwordSpan").addClass("form-control-feedback");
} else {
// Do something else
}
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
answered Nov 20 '18 at 16:21
NAVINNAVIN
1,6263624
1,6263624
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280734%2fhow-to-achieve-a-html-check-in-javascript-and-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Of course it is possible to call functions when an event happens - that is every-day practice used on countless web sites/apps. What is your specific problem in that regard? “Right now it inserts it BEFORE even though (according to me) I have inserted it AFTER” - you have not even shown us the HTML this operates on, so how could we possibly tell? Please provide a proper Minimal, Complete, and Verifiable example.
– misorude
Nov 13 '18 at 12:20
Inserting a
lidirectly after aninputcould not create a valid DOM structure to begin with though.lineeds to be a child of a list.– misorude
Nov 13 '18 at 12:21
@misorude giving you my HTML won't solve anything, considering I have pretty much nothing besides a form tag and the basic layout of HTML in it. everything is made with javascript, but let me throw in the HTML. Correct about the li directy after the input, but let me give you an example of what I am trying to make with js/jquery
– user10579402
Nov 13 '18 at 12:29
Where do you want
<li>in form? does<li>contain any data?– NAVIN
Nov 20 '18 at 12:05
No, not yet, the li is meant as the span: <span class="glyphicon glyphicon-ok form-control-feedback"></span> . I made the edit so it's a bit clearer. it was sloppy from my side.
– user10579402
Nov 20 '18 at 12:57