#StackBounty: #javascript #jquery #ajax #recaptcha How to verify recaptcha in server call?

Bounty: 50

SITUATION:

I used to check my recaptcha with a simple form submit with POST to “/login”.

I need to change my implementation for security reasons and would like to do something like:

1) Jquery form submit.

2) Make call to server to call verify recaptcha on the server.

3) Receive response without reloading page.

4) Accept login request or not based on response.


QUESTION:

It looks like I could make an AJAX request ? But I don’t know how.


CLIENT CODE:

Login

<button class="btn btn-default" id="loginButton">Submit</button> <span class="userLinks"> <a class="logLinks" href="/users/register">Register</a><a href="/users/password">Password?</a></span> </form> </div> </div> <% include ../partials/indexScripts %> <script> $("#loginForm").submit(function(e) { e.preventDefault(); var email = $("#loginEmail").val(); var password = $("#loginPassword").val(); // WOULD LIKE TO MAKE SERVER CALL HERE TO CHECK RECAPTCHA BUT I DONT KNOW HOW $this = $(this); $.ajax({ type: "POST", url: "users/register", data: $this.serialize() }).done(function(data) { if (successfulRecaptcha) { firebase.auth().signInWithEmailAndPassword(email, password ).then( authData => { } else { console.log("You are a robot!"); }

SERVER CODE:

router.post('/login', function(req, res, next) {
    verifyRecaptcha(req.body["g-recaptcha-response"], function(success) {
        if (success) {

        } else {

        }
    });
});


Get this bounty!!!

#StackBounty: #javascript #jquery #html How to use JQuery InputMask with HTML pattern

Bounty: 50

I have HTML input box for phone numbers.

I’m using InputMask to format input 860000000 in following:

8 600 00 000

I’m also using HTML pattern to check if numbers starts with 86 and there are total 9 digits, but with InputMask it stopped working, and can’t achieve It in any way:

<label for="phone" class="first-col">Mobile No.:</label>
<input type="text" id="phone" placeholder="8 600 00 000" required pattern="(86)d{7}" />

Have you any ideas?

There is JS Fiddle


Get this bounty!!!

#StackBounty: #jquery #ajax #asp.net-mvc #webgrid MVC WebGrid renders AJaX script before its table. How to force the generation of scri…

Bounty: 50

I have a WebGrid in my Razor View. It’s performing its task well like paging and sorting. Now I need to make the paging and sorting in ajax call, so I assigned it an ajaxUpdateContainerId.

Now When grid.GetHtml() method is called, it’s rendering its script first and then the table Html. I have the jquery loaded at the end of the page(Script Section in _Layout view).

Due to this, Ajax functions are useless as it can’t find JQuery.

I have a workaround for this: I copy the rendered script from page source and paste it in the script section of the view and it works but this still leaves the error in the console so I believe it’s not a proper solution.

Another workaround is to reference jquery before calling grid.GetHtml() method but that will leave two references to the same javascript library. Again bad design.

So is there any way we can force WebGrid to render the script in script section as it should logically behave.


Get this bounty!!!

#StackBounty: #jquery #twitter-bootstrap #search #filtering How can I filter my bootstrap 4 navbar links with a search bar?

Bounty: 50

I’m transitioning my old website using Bootstrap 4, so it’s definitely been a process of learning.

I’ve got the site layout working fine, but I realize that my left-sided vertical nav bar has a lot of links. Many of these grouped in collapsed nests.

I think it would be nice to add a search bar at the top of my nav so that I can filter the links based on partial strings entered in the search bar. This works for links that are not hiding inside a hidden div (or class=collapsed boostrap 4 ul).

I’d appreciate assistance in modifying my code to show filtered results that include any links hiding inside the collapsed ul?

My HTML:

    

My script:

    $('.search-filter').on('keyup', function () {
    var input = $('.search-filter').val();
    var filter = input.toLowerCase();

    if (filter.length == 0) { // show all if filter is empty
        $('a').each(function () {
            $(this).show(); // show links
        });
        return;
    } else {
        $('a').removeClass('collapsed');
        $('a').each(function () {
            $(this).hide(); // hide all links once search is begun
        }); 

        $('a:contains("' + filter + '")').each(function () {
              $(this).removeClass('collapsed'); // remove bootstrap 4 collapsed class designation
            $(this).show(); // show only matched links to search string?

        });
    }
});

Here’s a fiddle (https://jsfiddle.net/hematogones/fwq9ov6m/1/)


Get this bounty!!!

#StackBounty: #jquery #css #twitter-bootstrap #bootstrap-4 #flickity Fleckity Integrate With Bootstrap 4 Carousel

Bounty: 50

I start using Bootstrap 4 yesterday, and I exploring Fleckity last week. Now I just try to integrate Fleckity with my Bootstrap 4 using the quick Bootrap 4 examples and I’m using the carousel. But when I add the Fleckity with the built-in carousel the following has been dis-arranged, mis-aligned or any called with it. But I want to use the existing designs of the Bootstrap 4 example carousel not even using the Fleckity carousel controller I just need to add Fleckity to add touch, reponsive, and flickible carousels. The following codes I used below.

<

div class=”snippet”>

<

div class=”snippet-code”>

/* GLOBAL STYLES
-------------------------------------------------- */


/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel {
  margin-bottom: 4rem;
}


/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}


/* Declare heights because of positioning of img element */

.carousel-item {
  height: 32rem;
  background-color: #777;
}

.carousel-item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.marketing h2 {
  font-weight: normal;
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  /* Space out the Bootstrap <hr> more */
}


/* Thin out the marketing headings */

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
https://code.jquery.com/jquery-3.1.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />


<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <a class="navbar-brand" href="#">Carousel</a>
  
</nav>