-1

I cannot work out what is wrong with my code, and why the form validation simply is not firing. The code is an HTML form for inserting books into a database. I removed the PHP and CSS for simplicity's sake, but I can edit it back in if necessary. 

    function validateNewBook() {
 var isbn = document.forms['addNewBook']['isbn'].value;
 var title = document.forms['addNewBook']['title'].value;
 
 if (title == ""){
  alert("Please enter the book's title.");
  return false;
 }
 
 return true;
    }
    <form name="addNewBook" action='#' onsubmit="return validateNewBook()" method="post">
  <section id="controls">
   <input class="button" type="submit" name="save_new_book" value="Save Book"/>
   <input class="button" type="submit" name="browse_books" value="Browse"/>
  </section>
  <section id="input">
   <span>* required field</span>
   <span class="flex-input">
    <label>ISBN</label><input type="text" name="isbn" id="isbn" size=20 value="" /> <span class="errorMessage">*</span> &nbsp;
   </span>
   <span class="flex-input">
    <label>Title</label><input type="text" name="title" size=50 id="title" value="" />
    <span class='errorMessage'>*</span>
   </span>
            </section>
    </form>

However, when I run this code in my fuller program, the form still enters the new book into the database, even when the Title field is empty. What is happening?

Chuck Beans
  • 35
  • 6
  • You don't have close tag for `
    `.
     – AA Shakil Jun 10 '18 at 14:14
  • Don't use inline HTML event handling attributes such as `onsubmit`. There are **[many reasons](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991)** not to use this 25+ year old technique that just will not die. Additionally, **[don't use the self-terminating tag syntax](https://stackoverflow.com/questions/46939538/difference-between-script-src-foo-js-script-and-script-src-foo-js/46939597#46939597)**, which buys you nothing and only leads to opportunities for bugs. – Scott Marcus Jun 10 '18 at 14:17
  • 1
    When I test it, the form doesn't submit when the title field is empty. I can't reproduce the problem. – Quentin Jun 10 '18 at 14:17
  • You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. – Quentin Jun 10 '18 at 14:17
  • Your event handler is firing. – Scott Marcus Jun 10 '18 at 14:21
  • @Quentin Even though you're right about the label tag it is unrelated to the problem. – user3210641 Jun 10 '18 at 14:31
  • @Chuck Beans the provided code seems to be working as expected. Onsubmit function is fired and when the title input is empty it doesn't get submitted. Didn't you try to add the book when title field is a space (' ') ? – user3210641 Jun 10 '18 at 14:33
  • Thank you all for the comments. The field is definitely empty when I submit the form in my site, so I wonder if it has to do with the PHP that is controlling the page's actions. – Chuck Beans Jun 10 '18 at 14:37
  • @user3210641 — That's why I posted the comment about the label element as a comment, not as an answer. – Quentin Jun 10 '18 at 14:46
  • Nevermind, the problem had to do with my .js file, which had a few other functions in it. A different variable could not be defined, so the file stopped running, and my validation function never run. – Chuck Beans Jun 10 '18 at 16:26

1 Answers1

-1

It may be the case that user have input blank space on inputbox. So are required to filter that inputbox with trim function.For example.

title.trim();

You need to do before you mention any expresion.

Hira Kumar Maharjan
  • 280
  • 1
  • 6