0

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?

Improve this question
2
  • 1
    Are you asking for a design opinion or help with your code? Have you tried anything yet? Commented Sep 13, 2013 at 17:44
  • 2
    Input validation should always be done server-side, and additionally in javascript if it improves user experience. That being said, this sort of task is easy with a regular expression. There are many, many examples out there. Commented Sep 13, 2013 at 17:45

5 Answers 5

Reset to default
1

Have you tried using regular expression(regex). This might help...

http://php.net/manual/en/function.preg-match.php

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

10 Comments

I dont understand why is this answer marked down? This seems perfectly the solution that user needs.
I think because I marked the other answer down, since that answer did not prevent the submission. the other answer use on change, that means if the user clicks the submit that verification code is useless.
Preventing the form submit is trivial, "borrowing" the regex from Dany's answer and posting something with a slightly different condition to get points is bad form.
Not only that, but you had to change the markup and add a submit button to make it work !
That's not the case. the other answer validates the values being entered. Here the validation is done when submit button is clicked. That's what you'd need.
|
0

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

Improve this answer

5 Comments

This is not gonna prevent the form from submitting, if the user clicks the submit button right after they type the ticket number
@SamBattat - how to actually do the validation, preventing the form submit or whatever, isn't the question, the question is how to know that a valid input was given.
This is the question "What would be the best way to verify that the input follows this format before submitting to the API?"
Exactly, verifying is done with the regex, how the OP chooses to use that to prevent a form, use a validation plugin or whatever, is not the question, but I added it to the answer any way, just to shut you up.
but with on change, if the user submits the form (clicks the button) your on change event will not matter, because its not going to prevent the submission, come on you and I know what the OP want.
0

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.

Improve this answer

Comments

0 
    <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
}
Improve this answer

1 Comment

Above seems to be what I want to do but I still cannot get the validation to work. The code above is kind of chopped together. When adding the above into a PHP doc, the myFunction() just prints on screen and does not function. What is the random <?php for? Where specifically should myFunction() be declared?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.