Okay, so for my school project I need to create a page that has a form to input a contest code in a certain format, use javascript to validate it and display a "sorry" message. I believe I have everything correct, but clearly I do not as I am here asking for help. It seems like every time I try to submit the code, the page just refreshes, and my JSFiddle test returns a wonky error. Any help would be appreciated. The code that I am using is below with two JSFiddle links, one with just my code, and one with all of my HTML and my JavaScripting:
<script type="text/javascript">
$('.code_input').on('submit', function(e) {
e.preventDefault();
if ($('.code', this).val().match(/^[0-9]{6}\-[0-9]{6}\-[a-z]$/)) {
alert('Sorry, you did not win.');
}else{
alert('Not a valid code. Please try again.')
}
}); // reference point
</script>
<section class="code_input">
<form method="post">
<input type="text" class="code" name="code" placeholder="Type Code Here" />
<input id="submit" type='submit' value='Check Number'>
</form>
</section>
JSFiddle - Just the code
JSFiddle - All the code
https://jsfiddle.net/azhzpLct/
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
if (document.querySelector('.code').value.match(/^[0-9]{6}\-[0-9]{6}\-[a-z]$/)) {
alert('Sorry, you did not win.');
}else{
alert('Not a valid code. Please try again.')
}
});
Related
I am trying to code a page to lookup tickets in our system. All tickets follow the following format (6 digits, the dash, followed by 6 more digits):
123456-789123
I have created an HTML form to ask for and redirect the user to the results:
<section class="is-search">
<form method="get" action="http://mytesturl.com/tickets/lookup/info.php">
<input type="text" class="text" name="ticket" placeholder="Search by Ticket #" />
</form>
</section>
Currently, if someone types in "potato", the form will submit and throw several errors as the API obviously cannot search on "potato" or anything else that does not follow the ticket format.
I have seen a few recommendations on using JavaScript, however, I have not been able to get my syntax correct for the ticket format and was curious if there was a better way to do this in PHP as I am not familiar with JS.
What would be the best way to verify that the input follows this format before submitting to the API?
Have you tried using regular expression(regex).
This might help...
http://php.net/manual/en/function.preg-match.php
Use regular expression to check the format right before you submit the form
//on click, when the form is about to be submitted
$("#submit").click(function (e){
//prevent the submission unlit we check for valid format
e.preventDefault();
//check for valid format using regular expression test
if(/([0-9]{6}\-[0-9]{6})/.test($("input[name=ticket]").val())){
//submit
$("#search-form").submit();
}
else{
//display error
alert("error");
$("input[name=ticket]").val("");
}
});
HERE IS AN EXAMPLE
Regular expressions should work for this, both in javascript and PHP, something like :
$('.text').on('change', function() {
if (this.value.match(/^[0-9]{6}\-[0-9]{6}$/)) {
alert('ok');
}else{
alert('not valid');
}
});
FIDDLE
As noted by Jason in the comments, javascript validation is for convenience only, and any user input should be validated again on the serverside.
EDIT:
If for some reason you need the validation part as well ?
$('.is-search form').on('submit', function(e) {
e.preventDefault();
if ($('.text', this).val().match(/^[0-9]{6}\-[0-9]{6}$/)) {
this.submit();
}else{
alert('not a valid ticket number')
}
});
FIDDLE
You can start with adding the HTML attribute pattern="\d{6}\-\d{6} into the input tag. Then consider adding JavaScript checks, to cover browsers that do not support pattern but have JavaScript enabled.
<input type="text" class="text" name="ticket" placeholder="Search by Ticket #" onchange="myFunction()" />
myFunction(){
var value = $(".text").val();
if (/([0-9]{6}\-[0-9]{6})/.test(value)) {
$("input[type=submit]").removeAttr("disabled");
} else {
$("input[type=submit]").attr("disabled", "disabled");
}
}
<?php
if (preg_match('/([0-9]{6}\-[0-9]{6})/', &_POST['ticket'])) {
//execute code
}
I'm using the jquery.form.js from here: http://www.malsup.com/jquery/form/. I want to validate the text of the text input from the form before submitting. Validation goes to
'search_validate.php'. This part works fine. If validation passes, the form action's is changed. That works too.
Getting the form to submit normally after changing the action attribute doesn't work. The browser never goes to the '/videos/search/' page. It stays on the same page. I see the '/videos/search/' page loading in Firebug over and over though.
<form id="search" method="post" action="">
<input type="text" id="query" />
<input type="image" id="searchmag" src="blah.jpg" ?>
</form>
<script>
$(function(){
$('#searchmag').click(function(){
$('#search').attr('action','/search_validate.php');
$('#search').ajaxForm(function(data, textStatus){
if ((data.indexOf('letters & numbers only')>-1)) {
$('#query').css('color','#FF0000').val(data);
$("#query").unbind("click").click(function(){
$('#query').css('color','#848484').val('');
});
} else {
$('#search').attr('action','/videos/search/' + $('#query').val());
$('#search').submit();
}
});
});
});
</script>
This always works for me:
$("#myForm").on("submit", function(event) {
event.preventDefault();
// Validate form, returning on failure.
$(this).off("submit");
this.submit();
});
I hope this helps!
I'm not sure what I'm trying to do is possible without php or some other scripting language so I would be grateful for some advice.
We have a webserver which can only serve static HTML so we're a bit limited. We want to post e-mail sign up data from a form on this site using JavaScript off to a dataHandler.php script on another domain which will save it to a DB. When the customer clicks submit I don't want the page to navigate away to dataHandler.php though on the other domain I want it to refresh in some way (I don't know how) and say thanks for joining our e-mail list. An example of the code I am thinking about is below.
Any advice on how it might be achieved would be gratefully appreciated or any comments saying stop wasting your time would also be helpful.
<script type="text/javascript">
<!--
function validate() {
if (document.emailForm.email.value.length==0) {
alert("You forgot to enter your email address");
return false;
}
if (document.emailForm.email.value.length>0) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.emailForm.email.value;
if(reg.test(address) == false) {
alert('Invalid email address');
return false;
}
}
document.emailForm.submit()
return true;
}
//-->
</script>
<form id="emailForm" name="emailForm" action="http://www.otherdomain.com/dataHandler.php" method="post">
<input size="30" id="email" name="email" maxlength="200" />
<input onclick="validate();" type="button" value="Submit" />
</form>
You should have a look at the jQuery form plugin (http://jquery.malsup.com/form/) . it does exactly what your looking for and can be implemented with one line of code.
On my company's internal ticket tracking website, we have a form that we use to update or note changes in the ticket. When a client updates the ticket, I need to modify a text area, input, and click submit. I want to create a single button that will handle this repetitive task using a chrome extension.
In my extensions content.js script, I have the following which isn't getting the job done.
var blueButtonDom = document.createElement('a');
blueButtonDom.setAttribute('href','#');
blueButtonDom.setAttribute('onClick','clickHandler();return true');
function clickHandler() {
$('textarea[id$="PrivateNotes"]').val('blue');
$('input[id$="BillTime"]').val('1');
$('input[id$="btnSave2"]').click();
}
Any input from you all would be greatly appreciated.
Thanks much,
Joe Chin
jQuery:
$(document).ready(function() {
var $myLink = $('Automagical');
$myLink.click(function() {
$('#PrivateNotes').val('blue')
$('#BillTime').val('1');
$form.submit();
});
$('#myForm').prepend($myLink);
});
html:
<form id="myForm">
<textarea id="PrivateNotes"></textarea>
<input id="BillTime" type="text" />
<input id="btnSave2" type="submit" />
</form>
http://jsfiddle.net/pxfunc/T9bgw/
UPDATED to include $(document).ready()
This is the javascript code im using.
<script language="javascript" type="text/javascript">
function cancelevent()
{
input_box=confirm("Are you sure you want to cancel?");
if (input_box==true) {
document.cancelevent.submit();
} else {
}
}
</script>
This is the form thats being submitted:
<form name=cancelevent method="post" action="whor.php">
<input type="hidden" name="owner" value="owner">
Cancel
</form>
I have this form on 2 different pages. One page it works, the other, i get this error
Error: document.cancelevent.submit is not a function
Ive literally copy and pasted the code from the working page to the 2nd page....no idea what is going on or why it would do this.
I think the problem is that the HTML form and the javascript function have the same name!
Put an id on your form
<form id="cancelEventForm" name=cancelevent method="post" action="whor.php">
And use
document.getElementById('cancelEventForm').submit();