Link button doesn't validate

2022-05-04 09:39 virre136 imported from Stackoverflow

I have created a link button and it doesn't validate. I don't know why? I have searched for tips and everyone says it should work but it keeps showing the error?

<a href="home.html"><button id="english">English</button></a>

Image of validation errors

See also questions close to this topic

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

Matching number with regex

Need a single combined regex to match the following logic: The number should be 8 digits long, the 8th digit should be the remainder of (the first 7 digits / 7).

for example: 86008786

remainder = (the first 7 digit)/ 7 = 8600878 / 7 = 6

so the 8 digit 86008786 is valid number.

is it doable with regex?

Validation Control are not working on live server [Google Cloud] with VS 2015 (Asp.Net with C#)

On my local machine everything is working fine...but on live server validation control are not working. [I am using Google Cloud (Windows Server 2019)].

I am using VS 2015 (Asp.Net Web Form with c#))

my code is here...

 <asp:TextBox ID="txtFirstName" runat="server" placeholder="Your First Name" MaxLength="25"  ></asp:TextBox>
 <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName" Display="Dynamic" ErrorMessage="First Name is required." SetFocusOnError="True" ValidationGroup="v" ForeColor="Red"></asp:RequiredFieldValidator>
                               
  <asp:Button ID="btnSubmit" runat="server" Text="Submit" ValidationGroup="v"  />

I read some articles related to this. According to them I added below code in my web.config file but still issue are same...

 <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />  <!--Using 4.5 Version only-->

Struts2 field validator - Validate multiple fields together
As part of my project I have the credit card month and year as two different fields,
```
<field name="expiry-month">
    <field-validator>
        ...
    </field-validator>
</field>
<field name="expiry-year">
    <field-validator>
        ...
    </field-validator>
</field>
```
Now, I want to validate the values of these two fields as together so that the credit card expiry month and year are not in past.

How can I do that within XML?

Thank you.

How to add items from object in DOM with button click in javascript?

first time posting in here :)

I have recently started coding and for JS study practice, I wanted to make a button in my navbar that generates an object to DOM after clicking it. Can you please advise the steps regarding adding and appending items that I need to create inside addToDom function? I seem to mix up the process and after multiple failures have left the space blank.

P.S. Am I linking img correctly?

My current code so far:

const Kirstin = {
    firstName: 'Kirstin',
    lastName: 'Ortega',
    image: "img:resources/kirstin ortega.gif",
    alias: 'Police officer',
    getfullName: function(){
        this.firstName + ' ' + this.lastName;
    },
    
    addToDom: function(firstName, lastName, image, alias, getfullName,){

    }

}
const bodyElement = document.querySelector("btn1");
bodyElement.addEventListener("click", function (){
addToDom(this.firstName, this.lastName, this.image, this.alias, this.getfullName);
});

UPDATE I am trying to replicate the same structure in HTML file as follows:

 <article class = "articleTakeshi">
                <div class="cardTakeshi">
                    <img src="resources/takeshi kovacs.gif" alt="Avatar">
                    <div class="container">
                      <h2>Takeshi Kovacs</h2>
                      <p>The Last Envoy</p>
                    </div>
                  </div>
            </article>

So basically my goal is to create a new article with the same structure as pictured above using Javascript.

Heroku buttons styling issue

I made an app locally and pushed it on Heroku. The app is working perfectly on Heroku, however on the Homepage I have 2 buttons ( login and register ). When I run my app locally my buttons have some whitespace in between and they are rounded ( I am using tailwind for this). But on Heroku both buttons are not rounded and there is no whitespace in between them. When I inspect the button on Heroku, I see: class:".... rounded-full", which is what I expected and should have made the button rounded. Anyone has any idea what could cause this and how I can solve this ?

This is how my index.js looks like:

export default function Login() {
  return(
    <div>
      <Loginbuttons/>
    </div>
   )
}

and Loginbuttons.js defined as:

import Link from 'next/link'

export default function Loginbutton(props){
  return (
   <div>
   <div className = 'block'>
    <button
      style={{width:"10%", paddingTop:"15px",   paddingBottom:"15px"}}
      className='mt-10 mb-10 bg-blue-500 hover:bg-blue-700 text-wgvhite font-bold py-2 px-4 rounded-full'>
        <Link href='login' style={{textDecoration: 'none'}}>Login</Link>
    </button>

    <button
      style={{width:"10%", paddingTop:"15px", paddingBottom:"15px"}}
      className='mt-10 mb-10 ml-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full'>
        <Link href='register' style={{textDecoration: 'none'}}>Register</Link>
    </button>
  </div>
</div>)}

LabVIEW: view every time a button is pressed

I’m trying to make a simple project to practice with LabVIEW: I’m creating a VI with a standard Button and a stop button. When the VI is running, I’ clicking the button many times and then, when I click on STOP, I would visualize on Front Panel a “List” (I’m using an array for this) which contain a timestamp for every button pression.

Is it possible? How can I do this? I’m trying to create an array with the “insert into array” element, but it doesn’t seem to work.. Thank you all guys!
Can I perform an action like clicking on the server side?

I am quite new to web development and I have some trouble figuring out how to create a bot that clicks for me.

I have a website with a bunch of links that I want to click. I can easily identify them by building a web scraper. I want to create a bot that clicks the links every day at 12:00 AM without my intervention.

Since I won't always be online at the time, I wish to know if there is a way I can create a bot and host it, that can visit the site, authenticate, and do the clicking. All handled by the bot on the server without me having to open any browser tab.

In your reply, you can assume I am going to code the bot in Javascript or Python.

Thanks.

how to link date selector between 2 plotly dash plots

I'm curious if there is a way to link the date selectors between 2 plotly dash line plots so that when I click on one range (eg, last 3 months) both plots go to the same date range?

Here's a sample of 2 side by side graphs, and I have individual date pickers integrated into them, and I want to somehow link them (at least I'm thinking that may be good....mostly want to test and see if it works when viewing my data)

sample side by side plots

Also, for reference, this is what the range selector code I've used looks like in case that helps:

fig_err_2D.update_layout(
     xaxis=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1,
                     label="1 Month",
                     step="month",
                     stepmode="backward"),
                dict(count=2,
                     label="2 Months",
                     step="month",
                     stepmode="backward"),
                dict(count=1,
                     label="3 Months",
                     step="month",
                     stepmode="backward"),
                dict(count=1,
                     label="YTD",
                     step="year",
                     stepmode="todate"),
                dict(count=1,
                     label="1 Year",
                     step="year",
                     stepmode="backward"),
                dict(step="all")
            ]),
            bgcolor = '#737ca1'
        ),
        rangeslider=dict(
            visible=True,
            bgcolor = '#737ca1'
        ),
        type="date"
    ),
)

Django download links only working in new tab
This is driving me crazy, I'm developing a django app and need to provide a download link to a file located in the media folder. If I type the url in a blank tab it works fine, the file is downloaded, but if I click on the link from the website nothing happens. I realize this might be because the url to the file doesn't have the same origin that the website and from what I understood the browser won't allow the download, is this correct? Is there any way around?
```
url of the website (in development): http://localhost:8000/django_app/view_name
url of the file: http://localhost:8000/django_app/media/file.ext
```
I've tried the following html href:
```
href="../media/file.ext" download target="_blank"
```
And the following view:
```
def download_file(request):


fl_path = settings.MEDIA_ROOT + "\\filename.ext"
filename = "file_name"

mime_type, _ = mimetypes.guess_type(fl_path)
response = HttpResponse(fl, content_type=mime_type)
response['Content-Disposition'] = "attachment; filename=%s" % filename

return response
```
Nothing happens when I click on the link, no error generated. If I open the link in a new tab it downloads the file normally... Note that I need to be able to change the href link dynamically. Thanks!

Related questions

Link button doesn't validate

See also questions close to this topic