On line 2022 in wp-includes/comment-template.php WordPress 3.7.1 sets the form attribute to 'novalidate.' I don't see a hook to change that.
How do I convince WordPress to leave that attribute off so that native HTML5 form validation is active?
Bob
There's no filter to modify that attribute. You could remove it with jQuery:
$("#commentform").removeAttr("novalidate");
You can remove novalidate attribute with this simple Javascript:
<script type="text/javascript">
var commentForm = document.getElementById('commentform');
commentForm.removeAttribute('novalidate');
</script>
No jQuery needed.
You can include the following code to run script just on posts:
footer.php
<?php if( is_singular() ) : ?>
<script type="text/javascript">
var commentForm = document.getElementById('commentform');
commentForm.removeAttribute('novalidate');
</script>
<?php endif; ?>
Use this function rather than comment_form()
function validate_comment_form(){
ob_start();
comment_form();
echo str_replace('novalidate','data-toggle="validator" ',ob_get_clean());
}
Related
e.g. buttons..
<body disabled>
does not work
Thank you
The following script will select all descendants of your form element. You can use any selector to get the desired set of elements and apply this script to disable them all.
<script >
var form_elem=document.querySelectorAll("form *");
for(var i of form_elem){
i.setAttribute("disabled", true);
}
</script>
I would use javascript:
<script language='Javascript'>
document.getElementById("this_is_the_submitbutton").disabled = true;
</script>
Your submitbutton needs to have have the id='this_is_the_submitbutton'
I am searching for an option to open every external links from my website (wordpress-blog) to any other sites automatically in a new window. Is that with css or html possible without doing it 1000 times manually via hand as "target _blank"?
Thank you so much!
PS: sry for my bad english, I am no native speaker :(
Put this code in your theme functions.php file.
function cdx_handel_external_links() {
?>
<script type="text/javascript">
( function( $ ) {
$("a[href^=http]").click(function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr({
target: "_blank"
});
}
})
//Add Nofollow
$("a").each(function(){
if(this.href.indexOf('nytimes.com') >0 ){
$(this).attr({
rel: "nofollow"
});
}
});
} )( jQuery );
</script>
<?php
}
add_filter( 'wp_footer', 'cdx_handel_external_links', 999);
Yes, You can use Open external links in a new window plugin.
It will be helpful to open all or specific external links in a new window.
If you put the following in the head tag of your HTML, any href tag without a target should open in a new window:
<head>
<base target="_blank">
</head>
I have two CSS files in my Sencha touch application. Lets call them A.css and B.css. Based on the URL I want the application to load different CSS.
Lets say URL 1 is www.website.com/#1 so for this I would like to load A.css. similarly URL 2 is www.website.com/#2 so for this I would like to load B.css
Is it possible to load CSS dynamically based on the URL?
You can use JavaScript Regex for this.
Very easy method:
// For www.website.com/#1
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
// For www.website.com/#2
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
I hope this helps!!!
You can use the follow JavaScript code to load CSS dynamically for your requirement:
if (window.location == "http://www.website.com/#1") {
LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
LoadCSS("B.css")
}
function LoadCSS(filename) {
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
Get hashtag value from URL and then depending on value change the link for CSS.
To get hashtag value:
$url = "www.website.com/#1";
$params = parse_url($url);
$value = $params['fragment'];
This will give you hashtag value, then depending on value link CSS file in header:
<?php if ($value == 1) { ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>
I assume you have one template available for 2 URLs. Loading CSS using JavaScript is a pretty bad practice because it's slow and it's giving the user a bad experience since nothing is initially styled.
Anyway you can use the append function to add the CSS to the head tag.
$('head')
.append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'your_stylesheet_url') );
And for the URL itself simply use the JavaScript window.location like so:
if (window.location == "#1url") {
// load the A.css using the append function like above
}
I'm using jChartFX for some charting requirements for my website, I'm using
<?php include $_SERVER["DOCUMENT_ROOT"].'/footer.php' ?>
to bring in a footer to the website which has a line of code in it of
<script type="text/javascript" src="/js/retina.js"></script>
Which for some reason is making the chart not show for jChartFX. I have been through the process of commenting out the various sections of footer in order to isolate this being the incompatibility.
Note: I've not included the full page code to save on space, but can reply with full code if required.
The chart is displayed through;
<div id="ChartDiv" style="width:600px;height:400px"></div> <script type="text/javascript" language="javascript">
var chart1;
function loadChart()
{
chart1 = new cfx.Chart();
<!-- chart1.getData().setSeries(2); -->
chart1.getData().setSeries(1);
chart1.getAxisY().setMin(100);
chart1.getAxisY().setMax(1000);
var series1 = chart1.getSeries().getItem(0);
<!-- var series2 = chart1.getSeries().getItem(1); -->
series1.setGallery(cfx.Gallery.Lines);
<!-- series2.setGallery(cfx.Gallery.Bar); -->
var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>;
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
To be honest, I'm at a complete loss so any / all help would be appreciated.
Thanks
Maudise
I added retina.js to some of our jChartFX test pages and they displayed fine. There might be something else you are including in the page when you generate your footer.
I did not check too deep into retina.js but it seems to check for img tags and try to replace with retina counterparts and jChartFX does not use img tags.
Regards,
JuanC
I'd like to execute a piece of JavaScript when a certain condition is true in my view model:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
This code doesn't compile, how should I do this?
Try with this:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
</script>
Note the "#:"
For multi-line script within the razor conditional block, you can use:
<script type="text/javascript">
#if (Model.Employees.Count > 1)
{
<text>
executeJsfunctionOne();
executeJsfunctionTwo();
executeJsfunctionThree({
"var_one": true,
"var_two": false
});
</text>
}
</script>
This can make it cleaner and more practical than adding #: to each line. Everything within the <text></text> blocks is rendered as script.
If you have more complicated JS, you can do the following (script tags, or any tags, within an #if don't need extra escaping):
#if (Model.Employees.Count > 1)
{
<script type="text/javascript">
$(function() {
executeJsfunction();
});
</script>
}
Use js if-else block, not C#. Js has its own if-else block.
<script type="text/javascript">
if (#Model.Employees.Count > 1)
{
executeJsfunction();
}
</script>
The MVC variables are processed on the server side, the code is always trying to render the Javascript values in order to generate the HTML, please try the code below :
<script type="text/javascript">
#{if (Model.Employees.Count > 1)
{
#:executeJsfunction();
}
}
</script>
I hope this helps.
I know this question posted while ago however I added a new solution as an alternative solution:
you can inject your value from the model into data attribute of selected DOM's element and validate your condition by checking the value of the same data attribute you injected while building your view.
for example, check the following view and the script code snippet how to do it:
<div id="myDiv" data-count="#Model.Employees.Count">
</div>
<script>
if($("#myDiv").data("count") > 1){
executeJsfunction();
}
</script>
In case if you don't want to even render the java script based on some condition
define a section in your layout html
<html>
<body>
#RenderSection("xyz", required: false)
</body>
</html>
in your view
#if (Model.Condition)
{
#section xyz{
<script>
$(function () {
// Your Javascript
});
</script>
}
}
In my case I don't want to expose my Javascript if that feature is not enabled, also it'll reduce the size of the page