User has to enter ISBN Number for form to be accepted

Hi please, can you assist?
I need to set up a form wherein one of the fields the user will have to enter the ISBN number of a book.
Only if the number is correct will the form be accepted.
Can someone advise on how to set this up?

Thanks

1 Like

Hi Russel! Do you have a budget to hire a developer? If so, I might be able to connect you with someone who can help. Otherwise, a developer in the community may have some spare code laying around :smiley:

Just to confirm: are you looking to match the ISBN with a specific book from a database of ISBNs, or do you just need to confirm their input is in the correct format?

What is the budget?

Russel Davis

davis@brandinglab.co.za

Hey Russel! That depends what you need the ISBN input to do.

Are you looking to match the ISBN with a specific book from a database of ISBNs, or do you just need to confirm their input is in the correct format?

I just want to confirm their input.

1 Like

I didn’t have a chance to play around with it too much, but this might be what you need. I assume you could hire someone for less than 1 hour to implement… but don’t quote me on that. haha

I think your best bet is to make a quick post on Upwork. You can ask for specific functionality and get quotes. Since this is such a small job, I bet you can find someone to help.

Otherwise, you can give it a go yourself. I’ve not a developer, but it doesn’t seem too too bad.

1 Like

If I’m understanding the problem correctly, you should be able to use a HTML pattern attribute to ensure the value provided is in the correct ISBN format.

If you are using Webflow, click on the text input field in your form, and then click on the element settings tab (gear) on the upper right. In the custom attributes field, add an attribute, make the name pattern and then input the pattern value. I’m not super familiar with books and ISBN numbers, so I looked up a pattern that seemingly covers the majority of 10 and 13 digit ISBNs (include the entire set of characters below:

(?:(?=.{17})97[89][ -](?:[0-9]+[ -]){2}[0-9]+[ -][0-9]|97[89][0-9]{10}|(?=.{13})(?:[0-9]+[ -]){2}[0-9]+[ -][0-9Xx]|[0-9]{9}[0-9Xx])

This will enable the browser/form to check against the pattern to make sure it matches the appropriate format before the form can even be submitted. I have attached some screenshots to help.

If you are just looking to verify the proper format of the numbers, this is the way to do it. If it needs to match up against a database, more work will be involved.

40%20AM 09%20AM

1 Like

This is awesome! Thanks for posting!

1 Like

Hi there,

Thanks so much for your reply.
My goal is to have the user enter the correct ISBN number that will be on the book they purchase.
So if the user enters the correct number then the form will submit.

1 Like

Is this site for one specific book, several books, or millions of books? The solution will be different based on the goal/problem.

If you are simply making sure the user enters the ISBN of your autobiography, then the solution is very simple (maybe a couple lines of code). It gets much more complex when you are checking the number entered against all ISBNs in existence.

Can you provide more detail?

1 Like

Hi Scott,

Yes its for one specific book. The user needs to enter the isbn number of the book they have purchased in order to download free songs.

1 Like

Great. That’s pretty easy. This seems like more of a WebFlow/JavaScript question and not so much a MemberStack question.

I would use JavaScript to check the input field before the form can be submitted (e.g., disable the Submit button until the correct number is inputted). Or you could allow incorrect submissions but notify the user that the number is not correct. I don’t know if WebFlow has these functionalities since I’ve never used it.

Here is one simple way to do it with JavaScript by disabling the Submit button until the correct number is entered.

HTML
  1) make your form Submit button disabled by default
  2) add an onchange="javascript:checkISBN();" event to the input field where the user will enter the ISBN number.

Add this JavaScript wherever WebFlow accepts JavaScript (I'm not familiar with it)
  function checkISBN(){
    //strip the entered number of all non-numeric characters like dashes
    var no = document.getElementById("YourISBNTextFieldID").value;
    no = no.replace(/\D/g,"");

    //compare the number entered to the correct ISBN of your book
    if(no == 1234567890){
     document.getElementById("YourSubmitButtonID").disabled = false;
     }
  }

I believe the ISBN of your copy of the book and the ISBN of my copy of the book is the exact same. If that is correct, then my example and any other similar solution will be very easy to reverse engineer, but it’s also very easy to get the correct ISBN of a book just by looking at it or Googling the title so I doubt you have those concerns.

1 Like