Ensuring the accuracy of URLs using JavaScript

I am developing a form with an input field for entering a URL and a submit button. I want to incorporate JavaScript validation to show an alert box when a correct URL is entered. Is it achievable using JavaScript? If so, can you please guide me on how to implement this in the code snippet below?

<form name="lln-form" class="llnfrm" id="lln-form" id="bulk-form" action="" method="post" onsubmit="javascript:event.preventDefault(); return  submit_ajax();">
<fieldset style="">
<label>Enter URL:</label>
<input type="text" name="url" placeholder = "enter your url">
</fieldset>
<input class="lln-button button button-primary" type="submit" name="lln-submit" id="llnbuton" value="Save" onsubmit = "saveURL()"; />
</form>
<script type="text/javascript">
function saveURL()
{
    <?php
        if(isset($POST['url'])==true&&empty($POST['url'])==false){
            $url=$POST['url'];
            if(filter_var('$url',FILTER_VALIDATE_URL)==true)
                echo "Valid URL";
           }
    ?>
}

Answer №1

Give this a shot

var txturl=document.getElementById('TXTURL');
valid=txturl.value.search(/^([\w-]+(?:\.[\w-]+)*).((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2,4})?)$/i );
if(valid!=0){
    alert("URL is not valid");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic web interactions with jQuery Ajax and PHP session handling

My web page features 3 tabs in the main content area. When a user clicks on a tab, I utilize jquery and ajax to retrieve data from the server without having to reload the entire page, subsequently changing some div elements below the tabs. The data is fet ...

Avoiding the display of Laravel messages and guiding the user towards a personalized page in Laravel 5 error resolution

Is there a way to capture Laravel error and warning messages without disabling them from the config/app.php file? I am currently using Monolog for logging purposes. Here is a snippet of my code: public function view($id){ try { $tag = Tags::find(1 ...

Revise CodeIgniter's data update operations

Greetings, I have a data array. function modifyData($id) { $sql = $this->db->query("SELECT * FROM outbound WHERE id_outbound_voice='$id' ")->result(); $data = array(); foreach ($sql as $value) { $data[] = $v ...

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

Oops! There was a validation error as the duration was not formatted as a number. Please make sure to provide a valid numerical value for the duration field

When attempting to update data from a MongoDB database and checking the results on Postman, an error is encountered. The error reads as follows: "Error: ValidationError: duration: Cast to Number failed for value \"NaN\" at path \"duration&bs ...

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

I'm currently working on a straightforward tRPC server setup: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router({ greeting: t.procedu ...

Here's a guide on customizing the appearance of the date picker in NativeBase components for React Native by

Is there a way to show icons while using the date picker component from the Native Base UI library? ...

ObservableResolve(): Unleashing the power of RxJS5 for handling asynchronous data streams

Hey there! To dive deeper into RxJS, I thought of creating my own custom Rx operator. So here's a straightforward one that seems to be working smoothly: Rx.Observable.prototype.multiply = function (input) { const source = this; return Rx.O ...

Tips for validating a form's input on an ajax page with the help of jQuery

I am facing an issue with a form containing two inputs. The first input can be validated before triggering an ajax function, but the second input cannot be validated. The second input is loaded from a page using ajax, along with the submit button. I need t ...

The importance of incorporating React into the scope of functional component development

While discussing class components, it's clear that they are part of the global React object. But why is it necessary to import them with every functional component? And do bundlers play a role in this requirement? I've been coding for 5 months n ...

Exploring the contrast of utilizing the `new Date()` function compared to Firestore's `new

I am developing a new app and need to calculate the time elapsed between the start and end of a run. When the run starts, I record a timestamp using the new Date() function in Firebase. (I opted for this over firestore fieldValue to avoid conflicts with o ...

Having trouble making an Ajax request using the Yahoo API?

Any thoughts on why this code is failing? $(document).ready(function () { doAjax("http://somedomain.com/page.aspx"); }); function doAjax(url) { if (url.match('^http')) { $.getJSON("http://query.yahooapis.com/v1/public/yql?" + ...

The Angular Function has stopped working out of the blue following the implementation of Jquery Ajax

As a newcomer to php programming, I am facing an issue with my Angular Function not functioning properly when incorporating a jQuery ajax method post to update values in the database. Below is my angular code within HTML: <tfoot ng-app="kembalianApp" ...

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

I am a Vuejs beginner currently working on a project that involves both Vuejs (front end) and Laravel (Backend). I have been trying to integrate the JQuery library turn.js into my project, but I keep encountering errors. While I have managed to run jQuery ...

smoothly hide the dropdown menu when a link is clicked with a transition effect

I am struggling with two bugs in my dropdown menu that I can't seem to fix. The navigation links on my homepage take users to different sections of the page instantly when clicked. However, the issue arises when the dropdown menu does not close after ...

What is causing the failure of generating a DIV element with JQuery?

I'm having trouble creating a div element with a class and appending a child to it. I keep getting no response. What could be the issue? JS content function generateTable() { var procDiv = $("<div class='proc-container'></div>" ...

Example: Utilizing data transfer from model to directive

I have a question regarding a specific part in an example from Thinkster. I believe my confusion is due to my limited understanding of JavaScript and AngularJS fundamentals. I've been teaching myself since December, starting with the basics of JavaScr ...

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

The function isset($_SESSION['id']) is having issues with functionality

I am attempting to utilize the condition: isset($_SESSION['id']) So, I decided to try: echo isset($_SESSION['id']); and echo $_SESSION['id']; However, this produces different outputs. In reality, the correct resu ...

Function executed many times during click action

I have developed a web application that allows users to input any keyword or statement and receive twenty results from Wikipedia using the Wikipedia API. The AJAX functionality is working perfectly. The app should dynamically create a DIV to display each r ...