I have a small HTML form created that has a required input field; when I hover the mouse over the field, it shows the message "Please fill in this field" but when I click the button to submit, the error message does not display.
Here is the section of code containing the input field and button:
Web Word Count App
</div>
<div>
<textarea id="paragraph" rows="5" cols="35" placeholder="Enter the paragraph here..." value="" required="true" >Enter the paragraph here...
</textarea>
</div>
<div>
<input type="text" id="word" placeholder="Enter the keyword here..." value="" required="true" >
</div>
<div>
<input type="text" class="display" id="display-1" readonly=1 placeholder="Total word count = 0 " value=""><br>
<input type="text" class="display" id="display-2" readonly=1 placeholder="Keyword does not exist!" value=""><br>
<input type="text" class="display" id="display-3" readonly=1 placeholder="Total keyword appearances = 0" value="">
</div>
<div>
<button class="wwcbutton" onclick="Word_count();">Total words?</button>
</div>
<div>
<button class="wwcbutton" onclick="Check();">Check keyword appearance</button>
</div>
<div>
<button class="wwcbutton" onclick="keyword_count();">Total keyword appearances?</button>
</div>
<div>
<button class="wwcbutton-clear" onclick="Clear();">Clear</button>
</div>
Could someone please advise me as to what might be wrong here. Thanks
Related
<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
In HTML input validation , i have set the pattern of alphebetic only. When testing with numeric input in it , it shows
However, if i correct the input into the alphabets ,it will shows invalid again
I have to refresh the page again to input the correct format only it will not show
invalid. Is this normal?
This is my code:
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
You don't clear your setCustomValidity(). If you set a value with setCustomValidity() then the field is invalid. Just add such attribute to your input tag:
oninput="setCustomValidity('')"
Fixed in your code:
<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" oninput="setCustomValidity('')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
Is there any way to show an error message if a form is empty in AMP(i.e none of the fields have any value?). I tried the following, but it does not seem to work(Please not the div.error node).
<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" custom-validation-reporting="show-first-on-submit">
<p>My Form</p>
<div class="error" visible-when-invalid="valueMissing" validation-for="my-form">
Form is empty could not submit.
</div>
<div>
<input required id="username" type="text" placeholder="username" name="username">
<input required id="password" type="password" placeholder="password" name="password">
</div>
<input type="submit" value="OK">
</form>
Try with validation state invalid like on="invalid:error.show"
invalid : The form's validation state to "invalid" (in accordance with its reporting strategy).
<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" on="invalid:error.show" custom-validation-reporting="show-first-on-submit">
<p>My Form</p>
<div class="error" id="error" hidden>
Form is empty could not submit.
</div>
<div>
<input required id="username" type="text" placeholder="username" name="username">
<input required id="password" type="password" placeholder="password" name="password">
</div>
<input type="submit" value="OK">
</form>
So I have a form with two fields, one of these fields needs to have information in to successfully display the next page. How would I disable the submit button until that field has some text in it?
Here's the HTML Code;
<div id="content">
<form action="avatarquery.php" method="POST" id="login-form">
<fieldset>
<p>
<label for="login-username">Server Name:</label>
<input type="text" id="login-username" name="name" class="round full-width-input" autofocus />
</p>
<p>
<label for="login-password">Server IP:</label>
<input type="text" id="login-password" name="ip" class="round full-width-input" />
</p>
<input class="button round blue image-right ic-right-arrow" type="submit" id="register" />
</fieldset>
<br/><div class="information-box round">Please Note: Some servers may not work due to their Configs not having Query Enabled.</div>
</form>
If that has to be done using HTML, then in HTML5, you can use
<input type="text" required />
Otherwise in JavaScript, you can try setting an attribute to the input button.
Until the value is "", you can set the attribute
<input type="submit" disabled />
I have two textbox and one button in a popupbox.
I want to make button exactly below the two textbox ,
wherein in my code it is not happening. Please help
HTML COde :::
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Logine" class="marginleft5"></p>
<!-- <div class="login-help">
<p>Forgot your password? Click here to reset it.</p>
</div> -->
</form>
Use <div> tags for lines, or otherwise use <br/> to break line
I'm still trying to think up how to re-word this title.
Anyways so I have this contact form on my page here: http://leongaban.com/
When you click in name and fill it out you can then tab to the next field email. After entering in email, it is natural for the user to tab again into the message box.
However for some reason my tab selection jumps all the way up to the top of the page and seems to select my portfolio main nav link. A few more tabs and I'm back down into the message textarea.
This of course is not ideal at all, is there a way I can force the tab selections to go in the correct order? ie: Name > Email > Message > Captcha > Submit
My current form (HTML)
<div class="the-form">
<form id="myForm" action="#" method="post">
<div>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div>
<label for="email">Your Email</label>
<input type="text" name="email" id="email" value="" tabindex="1">
</div>
<div>
<label for="textarea">Message:</label>
</div>
<div>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<p><em>Hi, what is 2 + 3?</em></p>
<input type="text" name="captcha" id="captcha" />
<div>
<input class="submit-button" type="submit" value="Submit">
</div>
</form>
</div>
</footer>
You have to number your tabindex in the order you'd like them to go.
<input type="text" name="name" id="name" value="" tabindex="1">
<input type="text" name="email" id="email" value="" tabindex="2">
<textarea cols="40" rows="8" name="message" id="message" tabindex="3"></textarea>
<input type="text" name="captcha" id="captcha" tabindex="4"/>
<input class="submit-button" type="submit" value="Submit" tabindex="5">
etc.
Right now you have two tabindexes set to 1, so they will go first, as they are the only ones with a defined tabindex.
Try utilizing the tabindex property for your input fields. This will let you control the order in which the user can tab through your page elements.
Example code for this can be found here, though you are already setting a tabindex on the name and email inputs. Just add that property to the rest of your inputs and set them in the order you would like.