Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Validation

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42556
    jcoder
    Member

    Hi All,

    I am trying to write a validation script that will look at all the input’s on the page and if the input is empty (value=””), pop up an alert that says which input it is. I feel that I am close, though when I hit submit the alert works but then the form submits anyways. Any help would be great.

    [CodePen Link](http://codepen.io/jbatzel1Development/pen/LIncs “CodePen Link”)

    $(“form”).on(“submit”, function(){
    $(“input”).each(function(){
    var name = $(this).attr(“name”);
    if($(this).val() === “”){
    console.log(“Please enter a” + ” ” + name);
    return false;
    }
    });
    });

    #123724
    JohnMotylJr
    Participant

    If you are testing if a value is empty, null, etc you can simply modify that script, however, i suggest using the jQuery Validation plugin. Also, i once included this within a page (static page) along with the plugin but i dont believe you need it.

    $(function() {
    $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
    jQuery.data(this, "disabledOnSubmit", { submited: true });
    $('input[type=submit], input[type=button]', this).each(function() {
    $(this).attr("disabled", "disabled");
    });
    return true;
    } else {
    return false;
    }
    });
    });

    jQuery Validation Plugin Demo: http://jquery.bassistance.de/validate/demo/

    #123727
    jcoder
    Member

    Thanks for the quick response! I have used plugins in the past but I really wanted to try and write my own this time. I have messed around with some jQuery before though your script looks very confusing (No Offence), I have never seen jQery.data(……) or typeof before.

    Is my script written wrong?

    #123733
    JohnMotylJr
    Participant

    Have a gander at this pen. This isn’t very well written, however, you can definitely take and pull from this. I will attempt to comment it well.

    http://codepen.io/johnmotyljr/pen/JLrhK

    #123735
    jcoder
    Member

    Hi John,

    Thanks for the help, it worked!

    I have modified your code a little below and I’m just curious why you don’t think this is well written code? I’m new to jQuery but would love to learn best practices.

    $(“form”).on(“submit”, function(e){
    $(“input”).each(function(){

    var name = $(this).attr(“name”);

    if($(this).val() == “”){
    console.log(“There was an error” + ” ” + name);
    e.preventDefault();
    }else{
    return true;
    }
    });
    });

    #123760
    JohnMotylJr
    Participant

    @jcoder Are you new to Javascript as well or just jQuery?

    As far as this code, i felt it was a quick fix to a problem. Normally i would be more specific with my elements, test for every possible problem, and change the “input” for future use

    (<input type="submit || email || number || hidden || etc..."/>).

    #123792
    jcoder
    Member

    I’m fairly new to both, I have been using both for the past year but for very basic uses. I am trying to step up my game now!

    Thanks!

    #123798
    jcoder
    Member

    How does something like this look?

    $(“form”).on(“submit”, function(e){
    $(“input”).each(function(){

    var $this = $(this);

    if($($this).val() == “”){

    var name = $($this).attr(“name”);
    var li= $(“

  • “, {
    text: “There was an error with ” + name,
    class: “errorText”,
    });

    $($this).addClass(“errorInput”);
    $(“.errorMessage”).append(li);
    e.preventDefault();
    }else if($($this).val() != “”){
    $($this).removeClass(“errorInput”);
    }else{
    return true;
    }
    });
    });

#124046
jcoder
Member

Josh,

Thanks for the comment, I definitely see what mean about the huge list every time it tries to validate. I made a quick update to prevent this. How does this look below?

[CodePen](http://codepen.io/jbatzel1Development/pen/twdlu “CodePen”)

$(“form”).on(“submit”, function(e){
$(“li”).remove();

$(“input”).each(function(){
var $this = $(this);

if($($this).val() === “”){
var formName = $($this).attr(“name”);
var li = $(“

  • “,{
    text: “There was an error with ” + formName,
    class: “errorText”,
    });

    $($this).addClass(“errorInput”);
    $(“.errorMessage”).append(li);
    e.preventDefault();
    } if($($this).val() != “”){
    $($this).removeClass(“errorInput”);
    } else{
    return true;
    }
    }); //Input
    }); //Form .submit

    #124273
    jcoder
    Member

    Thanks!

    Viewing 10 posts - 1 through 10 (of 10 total)
    • The forum ‘JavaScript’ is closed to new topics and replies.