I've come back to web development after a lengthly lay off, I'm using bootstrap and creating a simple contact form. If there is an error with validation I want to add a couple of classes to make the form element turn red and put the little cross in the input.
I've used the examples from the bootstrap site and I get it to work fine. As soon as I put the content into a form the addClass doesn't stick. The input flashes red and goes back to the grey border. I've stripped back my whole html to check it isn't anything else I've done and have narrowed the error down to the tags.
Any help greatly appreciated. PS my first post on here, apologies if I've missed anything
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style type="text/css">
#emailError{
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div id="emailDiv" class="form-group">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control" id="email">
<div class="form-control-feedback" id="emailError">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-element">
<input type="submit" value="Sign Up" id="submitBtn">
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#submitBtn").click(function(){
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
});
</script>
</body>
</html>
Like #AlonEitan said, you need to disable the default action of the form, which is to submit the form and that will reload the page. You can disable the action with e.preventDefault() or return false. You can disable it conditionally if you find errors, or you can disable it by default, then manually submit once the form is validated. Here's an example.
$("#submitBtn").click(function(e){
e.preventDefault();
if (there are errors) {
$("#emailError").show();
$("#emailDiv").addClass("has-danger");
$("#email").addClass("form-control-danger");
} else {
$('#formId').submit();
}
});
Related
I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">
This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});
Updated fiddle
Source
while trying to build an UI for an android and ios app with phonegap i got stuck:
my function getFocus() tries to get the tagName and/or id of the element in focus by using
document.activeElement.tagName
but all browsers seems to get different results:
Chromium (54.0.2840.87 (64-bit)) and androids Webkit return what I would expect: "BUTTON"
Safari (10.0), Firefox (49.0.2) and the ios Webkit return: "DIV"
they all seem to look from a different starting point in the DOM.
How can i be more precise in order to get at least BUTTON from safari/ios webkit as well as chromium/ android webkit?
here is the complete example code:
[edit] I edited one line in response to the helpful comment by user the8472 and took out an tag that was around the tag [/edit]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="add">
<div data-role="header">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content">
<p></p>
<p>
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton" onclick="javascript:getFocus()">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
button inside a does not seem to be valid anyway. If you're doing non-specified things you shouldn't expect consistent behavior.
https://html.spec.whatwg.org/#the-a-element
4.5.1 The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.
https://html.spec.whatwg.org/#interactive-content-2
Interactive content is content that is specifically intended for user interaction.
a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), [...]
i got it:
as the8472 pointed out, i should check the html specs:
button is (understandably) not properly specified in its focus behaviour:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button tells me that do not give focus to a button when clicked. that explains the described behaviour.
when i transfer the onclick="javascript:getFocus()" to the tag for example and click on input fields (not the button of course) i get the correct and to be expected elements in focus returned:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body id="mybody" onclick="javascript:getFocus()">
<div data-role="page" id="add">
<div data-role="header" id="myheaderDiv">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content" id="mydiv">
<p id="myp">
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
to identify the different elements i will later use .activeElement.id
Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here
I am using parsley.js for form validation. I read through the documentation on the website and followed their examples, but it does not seem to work as expected.
Here's the test file I created:
<doctype>
<html>
<head>
<title>Parsley</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="parsley.js"></script>
<link rel="stylesheet" href="parsley.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2>Parsley.js Form Validation</h2>
<form id="testForm" data-parsley-validate>
<label>Name</label><br />
<input type="text" name="name" data-required="true">
<br /><br />
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
</div>
</div>
</body>
</html>
Any suggestions on what's going wrong?
You'll need to use data-parsley-required or directly required in your DOM.
Here are all the built-in validators: http://parsleyjs.org/doc/index.html#validators
Best
javascript file import should be in following order.
JQuery.js
Parsley.js
Common.js
<script type="text/javascript" th:src="#{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="#{/js/parsley.min.js}"></script>
<script type="text/javascript" th:src="#{/js/common.js}"></script>
If it's not like this, some component can't be known and it'll not working.I know it is a bit late, but I hope it can help someone.
I have a problem with Jquery load in dialog box.
I spent all night trying to figure out why the dialog box shifts to the right side of the screen when I loaded another file. Apparently loading different pages can affect it randomly. It can be center but at the very bottom, but I don't know why it is happening. All I know is the loading another page into a dialog box displaces the dialog box from the center.
This is the code i have:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="ProfilePage/jqueries.js"></script>
<script type="text/javascript">
$(
function()
{
$("#box").load("jquery1.html").dialog({modal:true,height:400,width:400});
}
)
</script>
</head>
<body>
<div id="parent" style="background-color:red;height:800px;width:800px;">
<div id="circle" style="position:relative;left:0px;height:800px;width:400px;background-color:green;float:left;">
</div>
<div id="box">
I want milk
</div>
<div id="sds" style="position:relative;float:left;left:5px;height:800px;width:399px;background-color:yellow;">
</div>
</div>
</body>
</html>
If I remove the load and just put a normal text in the div it works fine.
Can someone suggest an idea? Thanks!
just try to add it to the new line
$("#box").load("jquery1.html")
$("#box").dialog({modal:true,height:400,width:400});